type Answers = string | {
  tag: string;
  val: string;
};

type Title = string | {
  tag: string;
  val: string;
};

export interface QAs {
  id: number;
  title: Title;
  answers: Answers[];
  tags: (
    '操作系统' |
    '词语' |
    '摄影' |
    'CSS' |
    'HTTP' |
    'TCP' |
    'Redux' |
    'React' |
    'React Router' |
    'DOM' |
    'JavaScript' |
    'C' |
    'CPU' |
    'GPU' |
    'Memory' |
    '浏览器' |
    '正则表达式' |
    '图形学' |
    '程序设计语言' |
    '设计模式' |
    '函数式编程' |
    '响应式编程' |
    '命令式编程' |
    '声明式编程' |
    '编程思想' |
    '排序算法' |
    '算法' |
    '数据结构' |
    '测绘科学与技术' |
    '计算机网络' |
    '编译原理' |
    '柯里化' |
    '数学' |
    '代数' |
    '计算机科学' |
    '字符编码' |
    '编码'
  )[];
  type: '基础知识' | '通用领域知识' | '专用领域知识';
}

const data: QAs[] = [
  {
    id: 1,
    title: `Unicode 是什么？有什么用？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
是什么？
  Unicode 是包括字符集和编码方案的一项标准。
有什么用？
  用于对文本进行一致的编码、表示和处理。
        `,
      },
    ],
    tags: ['计算机科学', '编码', '字符编码'],
    type: '基础知识',
  },
  {
    id: 2,
    title: `UTF 是什么？`,
    answers: [
      'UTF 全称 Unicode 转换格式，是包含 UTF-8、UTF-16、UTF-32 等编码方案的统称。',
      'Unicode Transformation Format [ˈjuːnɪˌkəʊd] [ˌtrænsfərˈmeɪʃn] [ˈfɔːrmæt]',
    ],
    tags: ['计算机科学', '编码', '字符编码'],
    type: '基础知识',
  },
  {
    id: 3,
    title: `UCS 是什么？`,
    answers: [
      `UCS 全称 通用字符集，是 ISO 制定的一种字符编码标准。`,
      `Universal Character Set [ˌjuːnɪˈvɜːsəl] [ˈkærəktər] [set]`,
    ],
    tags: ['计算机科学', '编码', '字符编码'],
    type: '基础知识',
  },
  {
    id: 4,
    title: `计算机科学中，主要有哪些字符编码标准？分别由哪些组织制定？什么时候开始兼容？兼容了什么？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
主要有两种字符编码标准：
  - Unicode（Unicode 联盟 制定）
  - UCS（ISO 制定）
1991 年开始相互兼容。
兼容了字符集。
        `,
      }
    ],
    tags: ['计算机科学', '编码', '字符编码'],
    type: '基础知识',
  },
  {
    id: 5,
    title: `在字符编码术语中，编码位置是什么？有什么相似的术语吗？`,
    answers: [
      `编码位置（Code position）是字符集中字符对应的数字。`,
      `编码位置也称为码点（Code point）。`,
    ],
    tags: ['计算机科学', '编码', '字符编码'],
    type: '基础知识',
  },
  {
    id: 6,
    title: `Unicode 标准规定多少个码点不对应任何字符？为什么？这些码点还有用吗？`,
    answers: [
      `U+D800-U+DFFF 2048 个码点不对应任何字符，`,
      `因为 UCS-2 时代，U+D800-U+DFFF 内的值被占用，1991 年为了相互兼容，所以这一段码点被废弃。`,
      `还有用，UTF-16 的代理对会使用这段码点。`,
    ],
    tags: ['计算机科学', '编码', '字符编码'],
    type: '基础知识',
  },
  {
    id: 7,
    title: `UCS-2 和 UCS-4 是什么？有什么区别？`,
    answers: [
      `UCS-2 是 UCS 的一种固定长度的采用 2 个字节的编码方式。`,
      `UCS-4 是 UCS 的一种固定长度的采用 4 个字节的编码方式。`,
    ],
    tags: ['计算机科学', '编码', '字符编码'],
    type: '基础知识',
  },
  {
    id: 8,
    title: '说说 Redux 的术语。',
    answers: [
      '思维导图走起!',
    ],
    tags: ['Redux'],
    type: '专用领域知识',
  },
  {
    id: 9,
    title: `面向过程的程序设计，有哪些缺点？`,
    answers: [
      `概况：随着程序规模的增大，大量函数、变量之间的关系错综复杂。难以维护、复用和拓展。`,
      `注：所以“面向对象的程序设计”应运而生`,
    ],
    tags: ['计算机科学', '编程思想', '命令式编程'],
    type: '基础知识',
  },
  {
    id: 10,
    title: `为什么会存在 Unicode 和 UCS 等这些字符编码标准？`,
    answers: [
      `因为冯诺依曼机只能处理二进制数字，如果要处理文本，就必须先把文本转换为数字才能处理。`,
    ],
    tags: ['计算机科学', '编码', '字符编码'],
    type: '基础知识',
  },
  {
    id: 11,
    title: `在数学和计算机科学中，表达式（Expression[ɪkˈspreʃn]）是什么？有哪几种分类？最简单的表达式由什么组成？`,
    answers: [
      `表达式是由数字、变量和运算符等能求得数值的组合。`,
      `有两种：算术表达式和逻辑表达式。`,
      `最简单的表达式：由数字或变量组成。`,
    ],
    tags: ['数学', '计算机科学'],
    type: '基础知识',
  },
  {
    id: 12,
    title: `在 JavaScript 中，垃圾回收（GC）有哪几种算法？分别介绍一下原理和缺点。`,
    answers: [
      {
        tag: 'pre',
        val:
          `
引用计数
  原理
    根据对象是否被引用判断是否要回收对象。
  缺点
    存在循环引用问题
扫描标记
  原理
    从全局对象开始查找所有对象，那些访问不到的对象将会被回收。
  问题
    无
        `,
      },
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 13,
    title: `在 Unicode 中， 术语“平面”是什么意思？还有什么类似的术语？有多少个平面？每个平面有多少个码点？`,
    answers: [
      `平面，是一种码点的编排方式。`,
      `平面也称为“组”。`,
      `Unicode 有 17 个平面。`,
      `每个平面有 65536(16^4) 个码点。`,
      {
        tag: 'pre',
        val: `
00号平面 U+0000 - U+FFFF
01号平面 U+10000 - U+1FFFF
02号平面 U+20000 - U+2FFFF
03号平面 U+30000 - U+3FFFF
04号平面 U+40000
-       -
13号平面 U+DFFFF
14号平面 U+E0000 - U+EFFFF
15号平面 U+F0000 - U+FFFFF
16号平面 U+100000 - U+10FFFF
        `,
      },
    ],
    tags: ['计算机科学', '编码', '字符编码'],
    type: '基础知识',
  },
  {
    id: 14,
    title: `非 BMP 平面也被称为什么？`,
    answers: [
      `也被称为“辅助平面”和“星体平面”`,
    ],
    tags: ['计算机科学', '编码', '字符编码'],
    type: '基础知识',
  },
  {
    id: 15,
    title: `BMP 是什么？`,
    answers: [
      `BMP 全称“基本多文种平面”，又称为“零号平面”，表示 U+0000-U+FFFF 范围的码点。`,
      'Basic Multilingual Plane [ˈbeɪsɪk] [ˌmʌltiˈlɪŋɡwəl] [pleɪn]',
    ],
    tags: ['计算机科学', '编码', '字符编码'],
    type: '基础知识',
  },
  {
    id: 16,
    title: `UTF-8 是什么？有什么特点？`,
    answers: [
      `UTF-8 是 UTF 中的一种编码方案。`,
      `UTF-8 的特点是对不同范围的码点使用不同长度的位数进行编码。`,
      {
        tag: 'pre',
        val: `
Unicode 编码范围  位数  字节数  UTF-8 字节流(二进制)
000000-00007F    7    1     0xxxxxxx
000080-0007FF   11    2     110xxxxx 10xxxxxx
000800-00FFFF   16    3     1110xxxx 10xxxxxx 10xxxxxx
010000-10FFFF   21    4     11110xxx 10xxxxxx 10xxxxxx 10xxxxxx
        `,
      },
    ],
    tags: ['计算机科学', '编码', '字符编码'],
    type: '基础知识',
  },
  {
    id: 17,
    title: `UTF-8 与 UTF-16 相比，UTF-8 有什么优点。`,
    answers: [
      `UTF-8 对零平面的字符，编码内存利用率较高。`,
    ],
    tags: ['计算机科学', '编码', '字符编码'],
    type: '基础知识',
  },
  {
    id: 18,
    title: `字节序（Endianness）是什么？有几种？`,
    answers: [
      `字节序是字节的存储顺序。`,
      `有两种，大端序（BE）和小端序（LE）。`,
    ],
    tags: ['计算机科学', '编码', '字符编码'],
    type: '基础知识',
  },
  {
    id: 19,
    title: `小端序（Little Endian）是什么？和大端序有什么区别？有例子`,
    answers: [
      `小端字节序，是低位数据放低位地址的存储顺序。`,
      `区别：大端序是低位数据放高位地址。`,
      `Endian['endɪən]`,
      {
        tag: 'pre',
        val:
          `
比如数字 0x87654321，在两种不同字节序 CPU 中，其存储顺序如下所示：

Little Endian：

  低地址 高地址
  ----------------------------------------->
  | 21 |43 | 65 | 87 |

Big Endian：

  低地址 高地址
  ----------------------------------------->
  | 87 |65 | 43 |21 |
        `,
      },
    ],
    tags: ['计算机科学', '编码', '字符编码'],
    type: '基础知识',
  },
  {
    id: 20,
    title: '在正则表达式中，元字符「.」（point）“点号”是什么？',
    answers: [
      '点号是一个可以匹配除了换行符以外的任意字符的字符组。',
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 21,
    title: `Unicode 标准中的 BOM 是什么？有什么用？`,
    answers: [
      `BOM 全称“字节顺序标记”，是用来区分字节顺序的一个码点。`,
      `作用：用来区分字节顺序`,
      'Byte Order Mark',
    ],
    tags: ['计算机科学', '编码', '字符编码'],
    type: '基础知识',
  },
  {
    id: 22,
    title: '在正则表达式中，修饰符是什么？有哪几种修饰符？分别有什么意义？',
    answers: [
      '修饰符，全称“模式修饰符”是能改变正则表达式匹配模式的符号。',
      `常用的修饰符有 g、i、m`,
      {
        tag: 'pre',
        val:
          `
g
  表示开启，全局匹配模式
i
  表示开启，忽略大小写模式
m
  表示开启，多行文本模式（默认是单行文本模式）
        `,
      },
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 23,
    title: '在电子计算机中，字符是什么？',
    answers: [
      '字符是包括字母、数字、符号的码点。是数据结构中最小的数据存取单位。',
    ],
    tags: ['计算机科学', '编码', '字符编码'],
    type: '基础知识',
  },
  {
    id: 24,
    title: `Unicode 标准中的 BOM 的码点是什么？`,
    answers: [
      `U+FEFF`,
    ],
    tags: ['计算机科学', '编码', '字符编码'],
    type: '基础知识',
  },
  {
    id: 25,
    title: `如何区别 UTF-16 文件的字节序? `,
    answers: [
      'UTF-16 文件的开头，放置一个 BOM。',
      `如果一个文件开头的 16 个二进制的值转为十进制等于 65279（0xFEFF），则大端字节序；等于 65534（0xFFFE），则为小端字节序。`,
    ],
    tags: ['计算机科学', '编码', '字符编码'],
    type: '基础知识',
  },
  {
    id: 26,
    title: `XML 及其子集 HTML 使用的是哪种编码方案？在 XML及其子集中可以使用什么方式表示字符？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
编码方案：UTF-8
表示字符方式：&#xxx;
  十进制
    &#48;
  十六进制
    &#x30;
        `,
      },
    ],
    tags: ['计算机科学', '编码', '字符编码'],
    type: '基础知识',
  },
  {
    id: 27,
    title: `幂等（idempotent）是什么？`,
    answers: [
      `幂等是一个数学与计算机科学的概念。含义是函数在相同输入下多次运算结果相等。`,
    ],
    tags: ['计算机科学', '数学', '代数'],
    type: '基础知识',
  },
  {
    id: 28,
    title: `回文子串，是什么？`,
    answers: [
      `回文子串是一个对称的向左读和向右读结果一样的字符串。`,
    ],
    tags: ['计算机科学'],
    type: '基础知识',
  },
  {
    id: 29,
    title: `字符串，是什么？`,
    answers: [
      `字符串是一个有限字符序列。`,
    ],
    tags: ['计算机科学'],
    type: '基础知识',
  },
  {
    id: 30,
    title: `在计算机科学中，防抖（Debouncing），是什么？`,
    answers: [
      '思维导图走起!',
    ],
    tags: ['计算机科学'],
    type: '基础知识',
  },
  {
    id: 31,
    title: `时间戳（Timestamp）是什么？`,
    answers: [
      `时间戳是指格林尼治时间1970年01月01日00时00分00秒起至现在的总秒数。`,
    ],
    tags: ['测绘科学与技术'],
    type: '基础知识',
  },
  {
    id: 32,
    title: `GMT 是什么意思？`,
    answers: [
      `GMT 全称 格林尼治标准时间，表示格林尼治当地的时间。`,
      'Greenwich Mean Time',
    ],
    tags: ['测绘科学与技术'],
    type: '基础知识',
  },
  {
    id: 33,
    title: `格林尼治在那个城市？有什么意义？`,
    answers: [
      `城市：在英国伦敦。`,
      `意义：地球本初子午线的标界处，世界计算时间和经度的起点。`,
    ],
    tags: ['测绘科学与技术'],
    type: '基础知识',
  },
  {
    id: 34,
    title: `由于地球每天的自转正在缓慢__速，因此 GMT 的误差越来越大，已被使用__报时的 UTC 取代。`,
    answers: ['减', '钟原子'],
    tags: ['测绘科学与技术'],
    type: '基础知识',
  },
  {
    id: 35,
    title: `UTC 是什么？`,
    answers: [
      `UTC 全称 协调世界时间。`,
      'Coordinated Universal Time',
      '由于英文（CUT）和法文（TUC）的缩写不同，作为妥协，简称UTC。',
    ],
    tags: ['测绘科学与技术'],
    type: '基础知识',
  },
  {
    id: 36,
    title: `UTC 的误差不会超过__秒。`,
    answers: ['1'],
    tags: ['测绘科学与技术'],
    type: '基础知识',
  },
  {
    id: 37,
    title: `为了统一世界各地的日期，18__年规定了国际日期变更线，它在太平洋中的__°经线上。`,
    answers: ['84', '180'],
    tags: ['测绘科学与技术'],
    type: '基础知识',
  },
  {
    id: 38,
    title: `序列，是什么？`,
    answers: [
      `序列是一个按次序排好的行列。`,
    ],
    tags: ['数学', '计算机科学'],
    type: '基础知识',
  },
  {
    id: 39,
    title: `4 种常用的进制是哪些？`,
    answers: [
      '二进制(Binary)',
      '八进制(Octal)',
      '十进制(Plain decimal[ˈdesɪml])',
      '十六进制(Hexadecimal)',
    ],
    tags: ['数学', '计算机科学'],
    type: '基础知识',
  },
  {
    id: 40,
    title: `在源代码中，纯十进制，必须以非_1_数字开头；八进制，任何以_2_开头的数字（包括纯 0，严格模式下为 0o）；二进制，要求前缀_3_或_4_；十六进制，要求前缀_5_或 0X；`,
    answers: ['0', '0', '0b', '0B', '0x'],
    tags: ['数学', '计算机科学'],
    type: '基础知识',
  },
  {
    id: 41,
    title: `递归是什么？`,
    answers: [
      `递归是将原问题转化为较小的相似的问题来求解的技术。`,
    ],
    tags: ['计算机科学', '算法', '声明式编程', '函数式编程'],
    type: '基础知识',
  },
  {
    id: 42,
    title: `「递」的意思是将问题__。`,
    answers: ['拆解成子问题'],
    tags: ['计算机科学', '算法', '声明式编程', '函数式编程'],
    type: '基础知识',
  },
  {
    id: 43,
    title: `「归」的意思是__解决后，子问题一层一层的回归。`,
    answers: ['最小的子问题'],
    tags: ['计算机科学', '算法', '声明式编程', '函数式编程'],
    type: '基础知识',
  },
  {
    id: 44,
    title: {
      tag: 'pre',
      val: `
递归有以下两个特点:
1. 一个问题可以分解成具有__的子问题、子子问题。
2. 经过层层分解，最后的子问题一定是一个不能再分解的__（即终止条件）。
      `,
    },
    answers: [
      '相同解决思路',
      '固定值',
      {
        tag: 'img',
        val: '<img style="width: 100%" src="https://oss.taichiyi.com/markdown/c7103bc4ded24320badbf88a9e4e43c6.png" />',
      },
    ],
    tags: ['计算机科学', '算法'],
    type: '基础知识',
  },
  {
    id: 45,
    title: `阶乘（factorial[fækˈtɔːriəl]）是什么？`,
    answers: [
      `阶乘是小于及等于该数的正整数的积。`,
    ],
    tags: ['计算机科学', '算法'],
    type: '基础知识',
  },
  {
    id: 46,
    title: `在数学中，积是什么？`,
    answers: [
      `积是乘法运算的结果。`,
    ],
    tags: ['数学'],
    type: '基础知识',
  },
  {
    id: 47,
    title: `0的阶乘为__。`,
    answers: ['1', '0!=1'],
    tags: ['数学'],
    type: '基础知识',
  },
  {
    id: 48,
    title: `自然数n的阶乘写作__。`,
    answers: ['n!', '0!=1，n!=(n-1)!×n。'],
    tags: ['数学'],
    type: '基础知识',
  },
  {
    id: 49,
    title: `在计算机科学中，OOP 是什么？`,
    answers: [
      `OOP 全称“面向对象的程序设计”，是把客观事物抽象为对象的编程思想。`,
      "Object Oriented['ɔːrɪentɪd] Programming[ˈproʊɡræmɪŋ]",
    ],
    tags: ['计算机科学', '编程思想', '命令式编程'],
    type: '基础知识',
  },
  {
    id: 50,
    title: `在计算机科学中，POP 是什么？原则是什么？`,
    answers: [
      `POP 全称“面向过程的程序设计”，是自顶向下的编程思想。`,
      `原则：程序=(算法)+(数据结构)`,
      "Procedure[prəˈsiːdʒər] Oriented['ɔːrɪentɪd] Programming[ˈproʊɡræmɪŋ]",
    ],
    tags: ['计算机科学', '编程思想', '命令式编程'],
    type: '基础知识',
  },
  {
    id: 51,
    title: `在计算机科学中，AOP 是什么？与面向对象编程的目标有什么区别？`,
    answers: [
      `AOP 全称“面向切面编程”是通过预编译方式和动态代理方式实现在不修改源代码的情况下给程序动态添加功能的一种技术。`,
      {
        tag: 'pre',
        val:
          `
区别：
  面向对象编程的目标是：
    将需求功能划分为不同的相对独立的封装良好的类，依靠继承和多态来定义彼此的关系。
  面向切面编程的目标是：
    将横切关注点封装到切面中，已保持模块化。
    将相似的需求功能从多个类中分离出来，能够使多个类共享一个切面，一旦发生变化，不必修改多个类，只需要修改这个切面。

        `,
      },
      "Aspect[ˈæspekt] Oriented['ɔːrɪentɪd] Programming[ˈproʊɡræmɪŋ]",
    ],
    tags: ['计算机科学', '编程思想', '命令式编程'],
    type: '基础知识',
  },
  {
    id: 52,
    title: `在计算机科学中，SP 是什么？`,
    answers: [
      `SP 全称“结构化的程序设计”也称为“面向过程的程序设计”。`,
      `Structured['strʌktʃəd] Programming[ˈproʊɡræmɪŋ]`,
    ],
    tags: ['计算机科学', '编程思想', '命令式编程'],
    type: '基础知识',
  },
  {
    id: 53,
    title: `依赖注入，是什么？产生的背景是什么？`,
    answers: [
      '思维导图走起!',
    ],
    tags: ['设计模式'],
    type: '基础知识',
  },
  {
    id: 54,
    title: `在 JavaScript 中，const 和 let 有什么区别？`,
    answers: [
      `使用 const 关键字声明的变量，指针在程序运行期间不可改变。`,
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 55,
    title: `从储存的角度来说，字符串是什么？`,
    answers: [
      `是一个对象序列。`,
    ],
    tags: ['计算机科学'],
    type: '基础知识',
  },
  {
    id: 56,
    title: `ECMAScript 变量是__类型的，这意味着变量在运行时可以是__类型的数据。`,
    answers: ['松散(弱)', '任何'],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 57,
    title: '在计算机科学中，数制是什么？有哪些基本要素？',
    answers: [
      '数制，也称为“计数制”，是用固定符号和统一规则的表示数值的方法。',
      `基本要素：1.基数 2.位权`,
    ],
    tags: ['计算机科学', '数学'],
    type: '基础知识',
  },
  {
    id: 58,
    title: `let 是__作用域的，而 var 是__作用域的。`,
    answers: ['块', '函数'],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 59,
    title: `在全局执行上下文中使用 let 声明变量时，变量不会像使用 var 那样添加到__。`,
    answers: ['window对象'],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 60,
    title: `ECMAScript 几种数据类型？分为哪几类？分别是什么？`,
    answers: [
      `八种`,
      `两类：原始类型和引用类型。`,
      '1. Undefined(ES3)',
      '2. Null',
      '3. Boolean',
      '4. String',
      '5. Number',
      '6. Symbol(ES6)',
      '7. BigInt(ES10)',
      '8. Object',
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 61,
    title: `undefined 是ES__才加入的，是为了区分__和__之间的差异。`,
    answers: [
      '3',
      '空对象指针',
      '未初始化变量',
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 62,
    title: `严格模式下, 不再支持 arguments.__。`,
    answers: [
      'callee',
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 63,
    title: `严格模式下, 函数参数的值不会随 __ 的值的改变而变化。`,
    answers: [
      'arguments 对象',
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 64,
    title: `严格模式下, 删除__会报 SyntaxError，正常模式是静默失败。`,
    answers: [
      '变量',
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 65,
    title: `严格模式下, eval（）有自己的__。`,
    answers: [
      '执行上下文',
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 66,
    title: `严格模式下, 禁用 __ 关键字。`,
    answers: [
      'with',
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 67,
    title: `为什么要遵守设计模式的原则，或者说为什么要学习和使用设计模式？`,
    answers: [
      '思维导图走起!',
    ],
    tags: ['设计模式'],
    type: '基础知识',
  },
  {
    id: 68,
    title: `严格模式下, 禁止以零(0)开头的八进制语法，如果有则会抛出错误。ES6 中支持使用“__”前缀表示八进制数字。`,
    answers: [
      '0o',
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 69,
    title: `严格模式下, 要求函数的__唯一，如果有则会抛出 __ 错误。`,
    answers: [
      '形参名',
      'SyntaxError(语法错误)',
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 70,
    title: `严格模式下, 试图删除__的属性时会抛出异常，正常模式是静默错误。`,
    answers: [
      '不可删除',
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 71,
    title: `严格模式下，错误的__运算将会抛出异常，而不是静默失败。`,
    answers: [
      '赋值',
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 72,
    title: `静默失败（silently fail）是什么？`,
    answers: [
      '静默失败，是失败语句如同不存在一样的现象。',
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 73,
    title: `严格模式下，无法再意外创建__。如果有则会抛出 __ 错误。`,
    answers: [
      '全局变量',
      'ReferenceError(引用错误)',
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 74,
    title: `C 语言有哪几种语句？有例子`,
    answers: [
      {
        tag: 'pre',
        val:
          `
语句分为简单语句和块(blocks)语句/复合语句
  简单语句有三种
    赋值语句(assignment)
    选择/分支语句(selection/branching)
    迭代/循环语句(iteration/looping)
  块语句
    语句块
    函数块

try {
  let count = 1+2;
  while (true) {
    switch (count++) {
      case 1: {
        return count;
      }
      default: {
        return 0;
      }
    }
  }
} catch (error) {}
// '1. 标号语句',
// '2. 复合语句',
// '3. 表达式语句',
// '4. 选择语句',
// '5. 循环语句',
// '6. 跳转语句',
// '7. 声明语句',
// '8. try 块',
        `,
      }
    ],
    tags: ['计算机科学', '程序设计语言', 'C'],
    type: '通用领域知识',
  },
  {
    id: 75,
    title: `表达式和语句是什么关系？`,
    answers: [
      '语句的组成成分中包含表达式。',
    ],
    tags: ['计算机科学', '程序设计语言', 'C'],
    type: '通用领域知识',
  },
  {
    id: 76,
    title: `标号语句有哪几种语句？`,
    answers: [
      '“标识符 : 语句”',
      '“case 常量表达式 : 语句”',
      '“default : 语句”',
    ],
    tags: ['计算机科学', '程序设计语言', 'C'],
    type: '通用领域知识',
  },
  {
    id: 77,
    title: `复合语句是什么？`,
    answers: [
      '复合语句是花括号包括起来的语句序列。',
      '复合语句的括号“}”外不能加分号。',
      'compound statement'
    ],
    tags: ['计算机科学', '程序设计语言', 'C'],
    type: '通用领域知识',
  },
  {
    id: 78,
    title: `冯诺依曼机，有哪些特征？`,
    answers: [
      '1.由“存储器+运算器+控制器+输入设备+输出设备”组成。',
      '2.数制采用的是二进制。',
      '3.指令按顺序执行。',
    ],
    tags: ['计算机科学'],
    type: '基础知识',
  },
  {
    id: 79,
    title: `表达式语句语法：“表达式(可选)__”，大部分语句都是表达式语句，例如赋值或函数调用。`,
    answers: [
      ';',
    ],
    tags: ['计算机科学', '程序设计语言', 'C'],
    type: '通用领域知识',
  },
  {
    id: 80,
    title: `无表达式的表达式语句被称作__语句。`,
    answers: [
      '空（null statement）',
    ],
    tags: ['计算机科学', '程序设计语言', 'C'],
    type: '通用领域知识',
  },
  {
    id: 81,
    title: `选择语句的作用是什么？有几种语法？`,
    answers: [
      `根据表达式的值执行多条语句（控制流）中的一条。`,
      '1. “if ( 条件 ) 语句”',
      '2. “if ( 条件 ) 语句 else 语句”',
      '3. “switch ( 条件 ) 语句”',
    ],
    tags: ['计算机科学', '程序设计语言', 'C'],
    type: '通用领域知识',
  },
  {
    id: 82,
    title: `循环语句的作用是什么？`,
    answers: [
      '重复执行某些语句（指令）。',
    ],
    tags: ['计算机科学', '程序设计语言', 'C'],
    type: '通用领域知识',
  },
  {
    id: 83,
    title: `跳转语句无条件地转移__。有 3 种语法：1.__ 2.__ 3.__。`,
    answers: [
      '控制流',
      '“break [标识符];”',
      '“continue [标识符];”',
      '“return [表达式];”',
      '[JS 不支持]“goto 标识符;”',
    ],
    tags: ['计算机科学', '程序设计语言', 'C'],
    type: '通用领域知识',
  },
  {
    id: 84,
    title: `声明语句包括变量声明和函数声明。有哪几种语法？`,
    answers: [
      '“var 标识符 [= 表达式];”',
      '“let 标识符 [= 表达式];”',
      '“const 标识符 [= 表达式];”',
      '“function [标识符] () {}”',
    ],
    tags: ['计算机科学', '程序设计语言', 'C'],
    type: '通用领域知识',
  },
  {
    id: 85,
    title: `在命令式编程中，try 块提供当执行其他语句时捕获其所抛出的异常的能力。语法: __。`,
    answers: [
      '“try 复合语句 处理块序列”',
    ],
    tags: ['计算机科学', '程序设计语言', 'C'],
    type: '通用领域知识',
  },
  {
    id: 86,
    title: `指针是什么？包括哪两个方面？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
C 语言中一个指针的值是某个储存块的第一个字节的虚拟地址。
大多数计算机使用 8 位的块（字节），作为最小的可寻址的内存单元。
指针是储存块变量在内存空间的首个字节单元的内存地址。

两个方面
  值
    表示某个对象的位置
  类型
    表示那个位置上所存储对象的类型
        `,
      }
    ],
    tags: ['计算机科学', 'Memory'],
    type: '基础知识',
  },
  {
    id: 87,
    title: `前缀和（Prefix sum）是什么？`,
    answers: [
      `前缀和（Prefix sum）是数组中某项元素及之前的所有元素的和。`,
    ],
    tags: ['计算机科学', '算法'],
    type: '基础知识',
  },
  {
    id: 88,
    title: `FPS 小于 __ 时会让人感觉到卡顿。`,
    answers: [
      '24',
    ],
    tags: ['计算机科学', '图形学'],
    type: '基础知识',
  },
  {
    id: 89,
    title: 'JavaScript 中，Symbol 是什么？有什么用？',
    answers: [
      `Symbol 是一种所有值都是唯一的原始数据类型。`,
      {
        tag: 'pre',
        val:
          `
作用：
1. 避免对象的属性冲突
2. 创建对象私有属性
3. 作为对象的身份标识
        `,
      },
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 90,
    title: `面向对象编程中，对象的“状态”、“行为”和“标识”分别是什么？`,
    answers: [
      '状态是对象的所有属性。',
      '行为是改变对象状态和消息传递的方法。',
      '标识是对象间相区别的变量名称。',
    ],
    tags: ['计算机科学', '编程思想', '命令式编程'],
    type: '基础知识',
  },
  {
    id: 91,
    title: `类定义了事物的__和它可以做到的__。`,
    answers: [
      '属性',
      '行为',
    ],
    tags: ['计算机科学', '编程思想', '命令式编程'],
    type: '基础知识',
  },
  {
    id: 92,
    title: `面向对象编程中，封装是什么？`,
    answers: [
      `封装是限制状态读写的行为。`,
      `封装是一种将状态和方法结合成整体，将接口和实现分离的行为。`,
    ],
    tags: ['计算机科学', '编程思想', '命令式编程'],
    type: '基础知识',
  },
  {
    id: 93,
    title: `面向对象的“多态”，是什么？`,
    answers: [
      '多态可以理解为多个状态。',
      '多态依赖继承，没有继承就没有多态可言。',
      '多态性是同一操作作用于不同的对象的概念。',
    ],
    tags: ['计算机科学', '编程思想', '命令式编程'],
    type: '基础知识',
  },
  {
    id: 94,
    title: `面向对象的“继承”，是什么？`,
    answers: [
      `继承是子类可以访问父类的属性和方法。`,
      `对于父类的私有属性和方法，子类继承了但是不能直接访问。`,
      `“继承”是子类可以具有父类的属性和方法或者重新定义、拓展、覆盖属性和方法的概念。`,
    ],
    tags: ['计算机科学', '编程思想', '命令式编程'],
    type: '基础知识',
  },
  {
    id: 95,
    title: `面向对象的“消息传递”，是什么？`,
    answers: [
      `“消息传递”就是对象间通信。`,
      `消息传递：对象之间需要相互沟通，沟通的途径就是对象之间收发信息。`,
      `消息内容包括接收消息的对象的标识，需要调用的函数的标识，以及必要的信息。`,
      `消息传递的概念使得对现实世界的描述更容易。`,
    ],
    tags: ['计算机科学', '编程思想', '命令式编程'],
    type: '基础知识',
  },
  {
    id: 96,
    title: `“A extends B”。则 B 被称为父类、__类、__类，A 被称为__类或__类。`,
    answers: [
      '基(基础类)',
      '超',
      '子',
      '派生',
    ],
    tags: ['计算机科学', '编程思想', '命令式编程'],
    type: '基础知识',
  },
  {
    id: 97,
    title: `横切关注点（Cross-Cutting Concerns）是什么？`,
    answers: [
      '横切关注点是一些横越多个模块的功能点。',
    ],
    tags: ['计算机科学', '编程思想', '命令式编程'],
    type: '基础知识',
  },
  {
    id: 98,
    title: 'JavaScript 中，如何获取对象中所有为 Symbol 的属性？',
    answers: [
      `通过 Object 函数的静态方法 getOwnPropertySymbols`,
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 99,
    title: '在 JavaScript 中，怎么判断一个对象是否支持迭代器模式？',
    answers: [
      `如果对象有 Symbol.AsyncIterator 或 Symbol.Iterator`,
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 100,
    title: `控制反转（IoC）是什么？有哪两种实现方式？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
控制反转（Inversion of Control）是一种是面向对象编程中的一种设计原则，用来降低对象之间耦合性。

IoC 是一种思想。
DI 是一种设计模式。

IoC 常见的实现方式：
  依赖注入（Dependency Injection，a.k.a. DI）
  依赖查找（Dependency Lookup）
        `
      },
    ],
    tags: ['计算机科学', '编程思想', '命令式编程'],
    type: '基础知识',
  },
  {
    id: 101,
    title: `为什么每一种微处理器都有自己的汇编语言？`,
    answers: [
      '因为硬件设计和内部结构的不同，就需要不同的电平脉冲来控制。',
    ],
    tags: ['计算机科学', 'CPU'],
    type: '基础知识',
  },
  {
    id: 102,
    title: 'Data URLs，即前缀为 `__` 协议的URL，其允许内容创建者向文档中嵌入小文件。',
    answers: [
      'data:',
    ],
    tags: ['计算机科学', '计算机网络'],
    type: '基础知识',
  },
  {
    id: 103,
    title: 'react-redux 是这么触发 react 重新渲染的？',
    answers: [
      '思维导图走起!',
    ],
    tags: ['React', 'Redux'],
    type: '专用领域知识',
  },
  {
    id: 104,
    title: '在正则表达式中，怎么用环视为数值添加千位分隔符？以 123456789.00 为例说明。',
    answers: [
      {
        tag: 'pre',
        val:
          `
输入 123456789.00
输出 123,456,789.00
1. 目标：在字符串中找到所有逗号的位置，然后添加逗号(,)
2. 根据输出发现规律：逗号的位置右侧的数字的个数为 3 的倍数
  得：/(?=(\d{3})+)/g -> '123456789.00'.replace(/(?=(\d{3})+)/g,',')
  结果：",1,2,3,4,5,6,789.,00"
3. 改进：不应该匹配词的边界
  ,1,2,3,4,5,6,789.,00
  ^
  得：/\B(?=(\d{3})+)/g -> '123456789.00'.replace(/\B(?=(\d{3})+)/g,',')
  结果："1,2,3,4,5,6,789.00"
4. 改进：逗号插入问题
  1,2,3,4,5,6,789.00
   ^
  用“(?!\d)”来标记 3 位数字起始计数位置
  得：/\B(?=(\d{3})+(?!\d))/g -> '123456789.00'.replace(/\B(?=(\d{3})+(?!\d))/g,',')
  结果："123,456,789.00"
        `,
      },
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 105,
    title: `在 React 中，如何判断 React Element 是函数组件还是类组件？为什么不用 instanceof 判断？为什么不是布尔值而是对象？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
判断 React Element 的 type 属性值是否有 prototype(原型对象)，以及的 prototype 的 isReactComponent 属性值是否为真。

为什么不是 instanceof
  因为用一个页面上可能会存在多个 React 版本
为什么不是 bool
  因为原始类型数据会影响 Jest 的检查。Jest 开源之前，生成的模拟数据省略了原始类型。
        `,
      },
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 106,
    title: '计算机科学中，“集合”是什么？有哪些种类？',
    answers: [
      '集合是一组可变数量的数据项(也可能是0个)的组合。',
      '集合的种类包括列表，集，多重集，数和图。',
    ],
    tags: ['计算机科学', '数学', '数据结构'],
    type: '基础知识',
  },
  {
    id: 107,
    title: '在正则表达式中，元字符括号「(」和「)」有哪几种用途?',
    answers: [
      {
        tag: 'pre',
        val:
          `
1. 限制子表达式的范围（分组）。
2. 将若干字符组合成一个元素。
3. 反向引用。
        `,
      },
    ],
    tags: ['计算机科学'],
    type: '基础知识',
  },
  {
    id: 108,
    title: '在列表中，数据项的顺序是确定的吗？是否可以存在多个相同的数据项？',
    answers: [
      '是',
      '是',
    ],
    tags: ['计算机科学', '数学', '数据结构'],
    type: '基础知识',
  },
  {
    id: 109,
    title: '列表根据访问方式还可以分为__和__。',
    answers: [
      '队列',
      '栈',
    ],
    tags: ['计算机科学', '数学', '数据结构'],
    type: '基础知识',
  },
  {
    id: 110,
    title: '在数学中，“集”是什么？',
    answers: [
      '集是无序的不相同的元素集合。',
    ],
    tags: ['计算机科学', '数学', '数据结构'],
    type: '基础知识',
  },
  {
    id: 111,
    title: '多重集和集的唯一区别是，__可以存在相同数据项。',
    answers: [
      '多重集',
    ],
    tags: ['计算机科学', '数学'],
    type: '基础知识',
  },
  {
    id: 112,
    title: '关联数组和数组的唯一区别是什么？',
    answers: [
      '关联数组的下标可以是任意字符串。',
      '数组的下标只能是非负整数字符串。',
      '',
      'JavaScript的对象就是一个关联数组。',
    ],
    tags: ['计算机科学', '数据结构'],
    type: '基础知识',
  },
  {
    id: 113,
    title: '关联数组也称为，__和__。',
    answers: [
      '查找表',
      '字典',
    ],
    tags: ['计算机科学', '数据结构'],
    type: '基础知识',
  },
  {
    id: 114,
    title: '在图论中, 图是什么?',
    answers: [
      '图是一个表示物件与物件之间关系的图论中的术语.',
      '',
      '其中每个节点都是平等的',
    ],
    tags: ['计算机科学', '数学', '数据结构'],
    type: '基础知识',
  },
  {
    id: 115,
    title: '计算机中, 数组是什么?',
    answers: [
      '数组是一个存储元素的线性集合(collection).',
      `每个元素都有一个序号，这个序号从 0 开始，称为下标或索引，索引通常是数字，用来计算元素之间存储位置的偏移量。`,
      `线性的意思是元素在内存中是连续的。`,
    ],
    tags: ['计算机科学', '数学', '数据结构'],
    type: '基础知识',
  },
  {
    id: 116,
    title: '列表是一组__序的数据。每个列表中的数据项称为元素。在 JavaScript 中，列表中的元素可以是__数据类型。列表中可以保存多少元素并没有事先限定，实际使用时元素的数量受到程序内存的限制。',
    answers: [
      '有',
      '任意',
    ],
    tags: ['计算机科学', '数学', '数据结构'],
    type: '基础知识',
  },
  {
    id: 117,
    title: '迭代器（Iterator），是什么？',
    answers: [
      '迭代器是一个按某种次序访问集合对象中的每个元素的对象。',
    ],
    tags: ['计算机科学', '数据结构'],
    type: '基础知识',
  },
  {
    id: 118,
    title: '在计算机科学中，栈是什么？',
    answers: [
      '栈是一种只能在栈顶添加和删除元素的列表。',
    ],
    tags: ['计算机科学', '数据结构'],
    type: '基础知识',
  },
  {
    id: 119,
    title: '数制转换即__转换。',
    answers: [
      '进制',
    ],
    tags: ['计算机科学', '数学'],
    type: '基础知识',
  },
  {
    id: 120,
    title: '数码和数字有什么区别？例如：十进制有多少个数码？',
    answers: [
      `“数字”和“数码”对应的英文是“Digital”，这两个词是一个意思。`,
      `“数字”在大陆用的比较多，“数码”在台湾岛用的比较多。`,
      `十进制有十个数码，0、1、2、3、4、5、6、7、8、9`,
    ],
    tags: ['计算机科学', '数学'],
    type: '基础知识',
  },
  {
    id: 121,
    title: '在数学中，基数是什么？有例子',
    answers: [
      `基数，是集合论中表示任意集合大小的一个概念。`,
      `二进制的基数为 2；十进制的基数为 10。`,
    ],
    tags: ['计算机科学', '数学'],
    type: '基础知识',
  },
  {
    id: 122,
    title: '位权: 数制中某个位置上的__所表示数值的大小。1*位权，位权=基数^位置',
    answers: [
      '1',
    ],
    tags: ['计算机科学', '数学'],
    type: '基础知识',
  },
  {
    id: 123,
    title: '十进制的123，1的位权是__，2的位权是__；二进制中的 1011 ，第一个1的位权是__，0的位权是__。',
    answers: [
      '100',
      '10',
      '8',
      '4',
    ],
    tags: ['计算机科学'],
    type: '基础知识',
  },
  {
    id: 124,
    title: `在 JavaScript 中，Promise 是什么？为什么有？优点？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
Promise 是用于表示异步操作结果的对象。

为什么有？
  在没有 Promise 之前，都是通过回调函数（callback）来处理异步操作的。
  但是回调函数有些缺点：
    当多个回调函数嵌套时，会降低代码的可维护性。(回调地狱)
    不好处理异步操作中产生的异常。
优点
  Promise 可以优雅的链式的处理异步操作的结果以及中间发生的异常。
        `,
      },
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 125,
    title: '创建型模式，有哪几种？',
    answers: [
      '思维导图走起!',
    ],
    tags: ['设计模式'],
    type: '基础知识',
  },
  {
    id: 126,
    title: '结构型模式，有哪几种？',
    answers: [
      '思维导图走起!',
    ],
    tags: ['设计模式'],
    type: '基础知识',
  },
  {
    id: 127,
    title: '行为型模式，有哪几种？',
    answers: [
      '思维导图走起!',
    ],
    tags: ['设计模式'],
    type: '基础知识',
  },
  {
    id: 128,
    title: '正则表达式，是什么？',
    answers: [
      `正则表达式，是描述字符串结构模式的形式化的表达方式。`,
      ``,
      `regex`,
      `Regular Expression`,
      `[ˈreɡjələr] [ɪkˈspreʃn]`,
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 129,
    title: '在计算机中，正则表达式处理的对象是字符串，或者抽象的说，是一个__。',
    answers: [
      '对象序列',
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 130,
    title: `装饰器模式和代理模式有什么区别？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
职能角度
  装饰器模式用于动态的向对象添加功能。
  代理模式用于限制对对象的访问。
运行时角度
  装饰器模式只有在运行时，才能确定装饰对象的行为
  代理模式在编译时，就能确定代理对象的行为
        `,
      },
    ],
    tags: ['设计模式'],
    type: '基础知识',
  },
  {
    id: 131,
    title: '完整的正则表达式由哪几部分构成？',
    answers: [
      '由特殊字符和普通文本字符构成。',
      '特殊字符也称为“元字符”，普通文本字符也称为“文本”。',
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 132,
    title: '正则表达式中，字符组是什么？元素和结构体有什么区别？',
    answers: [
      `字符组是一组字符中的一个元素。`,
      `子表达式也称为结构体`,
      '元素包括字符、子表达式',
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 133,
    title: 'JavaScript 中，有哪几种生成 Symbol 值的方式？有什么区别？',
    answers: [
      {
        tag: 'pre',
        val:
          `
有两种
  1.直接调用 Symbol 函数。
  2.调用 Symbol 函数的静态方法 for。
区别
  直接调用 Symbol 函数，每次返回一个新的 Symbol 值；
  但是通过 Symbol 的 for 方法生成的 Symbol 值不一定是新的，可能是之前创建过的 Symbol 值。
        `,
      },
      `只能通过直接调用 Symbol 函数还生成 Symbol 值，没有字面量表示法。`,
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 134,
    title: '在正则表达式中，有几种文本模式？如何启用？',
    answers: [
      '有两种文本模式：单行文本模式和多行文本模式，通过添加修饰符 m 使用。',
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 135,
    title: '在正则表达式中，多行文本模式下，「$」是什么？',
    answers: [
      '多行文本模式下，「$」是一个匹配字符串内部的换行符的简单锚点。',
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 136,
    title: 'JavaScript 中，hoist-non-react-statics 是什么？',
    answers: [
      'hoist-non-react-statics 是一个将源对象中除了 React 静态关键词以外的全部属性复制到目标对象的程序包。',
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 137,
    title: '在正则表达式中，「^tcy$」的文字意义是什么？',
    answers: [
      '匹配的条件是，行开头(每一行都有一个开头)，然后是字母 t c y，然后是行末尾。',
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 138,
    title: '在正则表达式中，排除型字符组是什么？怎么表示？',
    answers: [
      '排除型字符组是一个非字符组内的元素。',
      '表示：通过在字符组的开头加入「^」来表示。',
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 139,
    title: '在正则表达式中，字符“-”在字符组的内部和外部，有什么区别？',
    answers: [
      `如果字符“-”出现在字符组的开头则表示普通字符，否则表示连字符（元字符）。`,
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 140,
    title: '摄影是什么？',
    answers: [
      '摄影是被摄体通过镜头在感光片上形成影像的过程。',
    ],
    tags: ['摄影'],
    type: '基础知识',
  },
  {
    id: 141,
    title: '在正则表达式中，多选结构是什么？多选分支是什么？怎么实现多选结构？',
    answers: [
      '多选结构是总表达式由多个子表达式组成的结构。',
      '子表达式又称为多选分支。',
      '通过使用元字符“|”来实现多选结构。',
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 142,
    title: '说说 Redux。',
    answers: [
      '思维导图走起!',
    ],
    tags: ['Redux'],
    type: '专用领域知识',
  },
  {
    id: 143,
    title: '在正则表达式中，可选项元素是什么？怎么表示可选项元素？用区间量词怎么表示可选项元素？',
    answers: [
      '可选项元素是出现零次或者一次的元素。',
      '使用元字符“?”来表示。',
      '区间量词：{0,1}',
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 144,
    title: '在正则表达式中，量词是什么？',
    answers: [
      '量词是限定所作用元素的匹配次数的元字符。',
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 145,
    title: '在正则表达式中，元字符“+”是什么？用区间量词该怎么表示？',
    answers: [
      '元字符“+”是匹配元素至少一次的量词。',
      '{1,}',
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 146,
    title: '在正则表达式中，元字符“*”是什么？用区间量词该怎么表示？',
    answers: [
      '元字符“*”是匹配元素任意次的量词。',
      `{0,}`,
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 147,
    title: '在正则表达式中，“反向引用”是什么？由哪几部分组成？',
    answers: [
      '“反向引用”是引用（复用）之前表达式的正则表达式特性。',
      '由两部分组成：子表达式和元字符序列。',
      {
        tag: 'pre',
        val:
          `
例子：
"ooo111ooo222ooo123".match(/(\\d)\\1/)
  ["11", "1", index: 3, input: "ooo111ooo222ooo123", groups: undefined]
"ooo111ooo222ooo123".match(/(\\d)\\1/g)
  ["11", "22"]
"abcdebbcde".match(/([ab])\\1/)
  ["bb", "b", index: 5, input: "abcdebbcde", groups: undefined]
        `.replace(/\\/g, '&#92;'),
      },
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 148,
    title: '在正则表达式中，“环视结构”是什么？',
    answers: [
      '“环视结构”是不匹配字符，只匹配文本中特定位置的正则表达式特性。',
      '环视不会占用“字符”。。',
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 149,
    title: '在正则表达式中，环视结构分为哪几种类型？',
    answers: [
      '肯定顺序环视「(?=...)」',
      '否定顺序环视「(?!...)」',
      '肯定逆序环视「(?<=...)」',
      '否定逆序环视「(?<!...)」',
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 150,
    title: '在正则表达式中，肯定顺序环视，是什么？有例子',
    answers: [
      '肯定顺序环视，是匹配成功条件为子表达式能够匹配右侧文本的表达式。',
      `例子：'Im a human'.replace(/(?=m)/,'\'') -> I'm a human`,
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 151,
    title: '在正则表达式中，否定顺序环视，是什么？有例子',
    answers: [
      '肯定顺序环视，是匹配成功条件为子表达式不能匹配右侧文本的表达式。',
      `例子：'12345.67'.replace(/(?!\\d)/g,',') -> “2345,.67,”`,
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 152,
    title: '在正则表达式中，非捕获型表达式，是什么？怎么表示？',
    answers: [
      `非捕获型表达式是只分组不捕获的表达式。`,
      '在元字符括号的开头依次添加问号和冒号表示。「(?:...)」',
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 153,
    title: '在正则表达式中，正则引擎分为哪几大类？JavaScript 属于哪个大类？',
    answers: [
      `分为 DFA 和 NFA 两大类。`,
      'JavaScript 属于 NFA。',
      'DFA(Deterministic finite automaton) 确定型有穷自动机',
      'NFA(Non-deterministic finite automaton) 非确定型有穷自动机',
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 154,
    title: '在正则表达式中，"The dragging belly indicates that your cat is too fat.".match(/fat|belll|belly|your/)，结果是什么？为什么？',
    answers: [
      `结果是“belly”`,
      {
        tag: 'pre',
        val:
          `
因为 JavaScript 是 NFA，是表达式主导的。
  子表达式依次从左到右匹配文本的第一个字符，
    如果某个表达式能匹配，则留下一个备用状态（面包屑），尝试继续匹配这个表达式，
      如果子表达式匹配成功，则返回结果。
      如果匹配失败，则会到之前的备用状态。
    如果这个开始字符所有子表达式都不能完全匹配，则到下一个文本字符。
  下一个文本字符。
        `,
      },
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 155,
    title: '在正则表达式中，标准的匹配量词（「*」、「+」、「?」和「{m,n}」）是匹配优先的吗？匹配优先是什么？',
    answers: [
      '是',
      '匹配优先是尽可能多的匹配字符的匹配方式。',
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 156,
    title: '在正则表达式中，正则DFA引擎是循环“匹配文本”还是“正则表达式”?',
    answers: [
      '匹配文本',
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 157,
    title: '在正则表达式中，锚点可以分为哪几类？',
    answers: [
      '简单锚点',
      '复杂锚点',
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 158,
    title: '在正则表达式中，简单锚点有哪几个？',
    answers: [
      '「^」',
      '「$」',
      '「\\b」'.replace(/\\/g, '&#92;'),
      '「\\B」'.replace(/\\/g, '&#92;'),
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 159,
    title: '在正则表达式中，__优先的结构只会在被迫的情况下交还字符。有例子。',
    answers: [
      '匹配',
      '[例子]「^.*([0-9]+)」匹配“copyright 2003.”，子表达式只捕获到了“3”',
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 160,
    title: '在正则表达式中，NFA 引擎和 DFA 引擎主要区别是什么？',
    answers: [
      'NFA 引擎是表达式主导的。',
      'DFA 引擎是文本主导的。',
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 161,
    title: '在正则表达式中，匹配优先量词和忽略优先量词有什么区别？',
    answers: [
      `本质区别：忽略优先量词不会保存备用状态。`,
      `忽略优先量词会把控制权交给表达式后面的元素。`,
      `"<div>abc</div><div>xyz</div>".match(/<div>.*?<\/div>/); // <div>abc</div>`.replace(/</g, '&#60;').replace(/>/g, '&#62;'),
      `"<div>abc</div><div>xyz</div>".match(/<div>.*<\/div>/);  // <div>abc</div><div>xyz</div>`.replace(/</g, '&#60;').replace(/>/g, '&#62;'),
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 162,
    title: '在正则表达式中，怎么表示“忽略优先量词”？有例子',
    answers: [
      '“忽略优先量词”通过在量词后面加一个“「?」问号”来表示。',
      `"<div>abc</div><div>xyz</div>".match(/<div>.*?<\/div>/); // <div>abc</div>`.replace(/</g, '&#60;').replace(/>/g, '&#62;'),
      `"<div>abc</div><div>xyz</div>".match(/<div>.*<\/div>/);  // <div>abc</div><div>xyz</div>`.replace(/</g, '&#60;').replace(/>/g, '&#62;'),
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 163,
    title: '在正则表达式中，量词有哪几种？',
    answers: [
      '问号     ?        ',
      '加号     +        ',
      '星号     *        ',
      '区间量词 {min,max} ',
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 164,
    title: '在正则表达式中，(JavaScript 不支持)固化分组「(?>...)」表示匹配到闭括号后，此结构体中的所有__都会被放弃。',
    answers: [
      '备用状态',
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 165,
    title: '说说浏览器的性能优化',
    answers: [
      '思维导图走起!',
    ],
    tags: ['浏览器'],
    type: '专用领域知识',
  },
  {
    id: 166,
    title: '子序列是什么？',
    answers: [
      '子序列（简称子列）是序列的一部分项按原有次序排列而得的序列。',
    ],
    tags: ['数学', '计算机科学'],
    type: '基础知识',
  },
  {
    id: 167,
    title: '子串，是什么？',
    answers: [
      '子串是串中任意个连续的字符组成的序列。',
    ],
    tags: ['数学', '计算机科学'],
    type: '基础知识',
  },
  {
    id: 168,
    title: '说说 React 的生命周期。',
    answers: [
      '思维导图走起!',
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 169,
    title: '概念是什么？',
    answers: [
      '概念是人类在认识过程中，把所感觉到的事物的共同特点加以概括的思维结果。',
    ],
    tags: ['词语'],
    type: '基础知识',
  },
  {
    id: 170,
    title: '在 JavaScript 中，哪些原生语言结构会自动使用迭代器模式？',
    answers: [
      'The spread operator(展开运算符)',
      '',
      'for-of',
      'yield* operator',
      '',
      'Array.from()',
      'Array destructuring(数组结构)',
      'Set construction(构建)',
      'Map construction(构建)',
      '',
      'Promise.all()',
      'Promise.race()',
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '基础知识',
  },
  {
    id: 171,
    title: `在计算机科学中，节流（throttling），是什么？`,
    answers: [
      '思维导图走起!',
    ],
    tags: ['计算机科学'],
    type: '基础知识',
  },
  {
    id: 172,
    title: '语句（statement）是什么？',
    answers: [
      '语句是最小的完整的程序。',
    ],
    tags: ['计算机科学', '程序设计语言', 'C'],
    type: '基础知识',
  },
  {
    id: 173,
    title: '若干是什么？',
    answers: [
      '若干是一个表示一个或多个的量词。',
    ],
    tags: ['词语'],
    type: '基础知识',
  },
  {
    id: 174,
    title: 'while 语句是什么？',
    answers: [
      'while 语句是一种循环语句。',
    ],
    tags: ['计算机科学', '程序设计语言', 'C'],
    type: '基础知识',
  },
  {
    id: 175,
    title: '在计算机科学中，副作用（side effect）是什么？主作用（main effect）是什么？有例子',
    answers: [
      {
        tag: 'pre',
        val:
          `
在计算机科学中，
  一个运算、函数、表达式如果在局部环境（上下文）之内修改某个状态变量的值，则被称为有主作用。
  一个运算、函数、表达式如果在局部环境（上下文）之外修改某个状态变量的值，则被称为有副作用。
主作用和副作用都是一种行为。
副作用包括
  - 修改非局部变量
  - 修改静态局部变量
  - 修改通过引用传递的可变参数
  - 执行 I/O
  - 调用其它副作用函数
注意：副作用是“改变”外部环境的 state，“访问”外部环境的 state 不是副作用!

// 反证法，什么是主作用？主作用（main effect）是通过运算得到计算结果。
// 所以，通过运算得到的结果中除了计算结果，其他的结果都是副作用。
// 副作用是跟函数外部环境发生的交互。
// 例子：1. 抛出一个被外部捕获的异常；2. 访问 DOM；3. 修改文件；4. 访问外部数据。
        `
      },
    ],
    tags: ['计算机科学', '编程思想'],
    type: '基础知识',
  },
  {
    id: 176,
    title: 'JavaScript 中，有哪几种执行上下文类型？',
    answers: [
      '全局(Global Execution Context)',
      '函数(Functional Execution Context )',
      'eval(Eval Function Execution Context)',
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 177,
    title: `React 中，为什么列表组件的元素要添加 key 属性？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
总的来说
  是为了更快的找出两颗树的差异。
具体来说
  在一些通用的算法中，即时是最好的时间复杂度也得是 O(n³)，为了将算法优化至 O(n)，React 根据场景做了 3 个假设：
    1. 如果元素的类型不同，则渲染出的树也不同
    2. 元素不会跨层移动
    3. 开发者为列表(数组)元素设置一个 key 属性，作为元素在列表中的唯一 id，帮助 React 识别元素是否被添加或删除。
          `,
      },
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 178,
    title: 'TODO',
    answers: [
      'Redux 提供了 5个 API。',
      {
        tag: 'pre',
        val: '',
      }
    ],
    tags: [],
    type: '专用领域知识',
  },
  {
    id: 179,
    title: 'JavaScript 中，解析器每次遇到新作用域时都会在当前执行上下文中创建__（例如，遇到if，for语句等）。有图',
    answers: [
      '词法环境',
      {
        tag: 'img',
        val: '<img style="width: 100%" src="https://oss.taichiyi.com/markdown/ov33jtml.png" alt="img">',
      },
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 180,
    title: '在 React 中，纯函数组件是什么？',
    answers: [
      '纯函数组件是输入等于输出没有一种组件。输入不变则不用重新渲染。',
      '展开：React 是怎么判断 纯函数组件 是否需要渲染的?',
      '答：浅比较 props 和 state',
      '展开：组件的输入值只有 props 为什么要比较 state?',
      '答：因为 Props 可能会产生派生状态，所以也要比较 State。',
      '展开：React 内部如果判断组件是否需要渲染的机制？',
      '答：参看“React 如何判断是否需要渲染组件，流程图”',
    ],
    tags: ['React'],
    type: '通用领域知识',
  },
  {
    id: 181,
    title: 'React 的状态(state)是什么？有展开问题。',
    answers: [
      '通过事件可以被改变的，自身变动可能会引起视图变化的数据。',
      '展开：React 组件的状态，为什么只能通过相关的函数修改，不能直接通过变量修改？',
      '答：请查看同名问题。',
    ],
    tags: ['React'],
    type: '通用领域知识',
  },
  {
    id: 182,
    title: 'JavaScript 中，执行上下文的“创建阶段”主要发生了哪两件事情？',
    answers: [
      '创建 词法(LexicalEnvironment)环境组件',
      '创建 变量(VariableEnvironment)环境组件',
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 183,
    title: 'JavaScript 中，每个词法环境由哪三个部分组成？例子：',
    answers: [
      '环境记录 EnvironmentRecord(Environment Record)',
      '外层环境引用 Outer(Outer Environment Reference)',
      '绑定this ThisBinding(This binding)',
      {
        tag: 'pre',
        val:
          `
GlobalExecutionContext = {
  LexicalEnvironment: {
    Outer(outer environment reference): < null >,
    ThisBinding: < Global Object>
    EnvironmentRecord: {
      Type: "Object",
      a: < uninitialized >, // 读取未初始化(uninitialized)的变量，会报错
      b: < uninitialized >,
      multiply: < func >
    },
  },
  VariableEnvironment: {
    Outer: < null >,
    ThisBinding: < Global Object >
    EnvironmentRecord: {
      Type: "Object",
      c: undefined,
    },
  }
}

FunctionExecutionContext = {
  LexicalEnvironment: {
    Outer: < GlobalLexicalEnvironment >,
    ThisBinding: < Global Object or undefined >,
    EnvironmentRecord: {
      Type: "Declarative",
      Arguments: {0: 20, 1: 30, length: 2},
    },
  },
  VariableEnvironment: {
    Outer: < GlobalLexicalEnvironment >,
    ThisBinding: < Global Object or undefined >,
    EnvironmentRecord: {
      Type: "Declarative",
      g: undefined
    },
  }
}
        `
      }
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 184,
    title: 'JavaScript 中，词法环境中，环境记录是什么？',
    answers: [
      `环境记录是多个标识符映射到值的记录。`,
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 185,
    title: 'JavaScript 中，词法环境中，Outer 属性是什么？外层环境引用(outer environment reference)是什么？',
    answers: [
      '全称“外层环境引用”，外层环境引用是一个外层执行上下的词法环境或变量环境的引用。',
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 186,
    title: `“横切关注点”和“面向切面编程”有什么关系？`,
    answers: [
      '横切关注点可以被模块化为固定的类，这些类称为切面（aspect）。',
    ],
    tags: ['计算机科学', '编程思想', '命令式编程'],
    type: '基础知识',
  },
  {
    id: 187,
    title: '在 ES6 中，词法环境组件和变量环境组件有什么区别？',
    answers: [
      `词法环境组件储存“函数定义”和“变量（let和const）”。`,
      `变量环境组件仅用于存储变量 var。`,
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 188,
    title: 'React 的属性(Props)是什么？',
    answers: [
      'Props 代表 React 组件的输入值。',
    ],
    tags: ['React'],
    type: '通用领域知识',
  },
  {
    id: 189,
    title: '在计算机科学中，声明是什么？',
    answers: [
      '声明是将变量标识符信息告诉编译器但不分配内存空间的行为。',
      '例如：在 JavaScript 中，声明一个变量：var a;',
    ],
    tags: ['计算机科学', '程序设计语言', 'C'],
    type: '通用领域知识',
  },
  {
    id: 190,
    title: '在计算机科学中，定义是什么？',
    answers: [
      '定义是将变量标识符信息告诉编译器并分配内存空间的行为。',
      '例如：在 C 语言中，一般声明就包含了定义，int a;(确定了变量和变量的类型，默认值一般为 0)，但是在 JavaScript 中，var a; 就只是声明。',
    ],
    tags: ['计算机科学', '程序设计语言', 'C'],
    type: '通用领域知识',
  },
  {
    id: 191,
    title: '计算机科学中，初始化是什么？',
    answers: [
      '初始化是在变量开辟内存空间时赋默认值的行为。',
      '不指定的话开辟时赋该类型的默认值。初始化是编译器的行为。在 JavaScript 中，变量的初始化值为 undefined。',
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 192,
    title: '赋值是什么？',
    answers: [
      '赋值，是在运行时对变量的值进行刷新的行为。',
    ],
    tags: ['计算机科学', '程序设计语言', 'C'],
    type: '通用领域知识',
  },
  {
    id: 193,
    title: 'JavaScript 对象对其原型的引用是“__引用”，对其属性值的引用是“__引用”。',
    answers: [
      '隐式',
      '显式',
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 194,
    title: 'JavaScript 中，装箱是什么？如何想任意类型的值转为对象？装箱又分为隐示和显示，想好后看例子。',
    answers: [
      `装箱就是把原始类型转变为对象的过程。`,
      `new Object(任意类型的值)`,
      `显示装箱：new String('abc').split('');`,
      `隐示装箱：'abc'.split('');`,
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 195,
    title: 'JavaScript 中，拆箱 是什么？',
    answers: [
      `拆箱就是把对象转变为原始类型的值的过程。`,
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 196,
    title: 'JavaScript 中，尝试把一个对象转换为原始值时，将调用 __ 方法。',
    answers: [
      `ToPrimitive ( input [ , PreferredType ] )`,
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 197,
    title: '命令式编程（Imperative[ɪmˈperətɪv] Programming）是什么？',
    answers: [
      `命令式编程，是注重如何执行和程序流程（状态）的编程范式。`,
      `例子：C 语言、汇编语言。`,
    ],
    tags: ['计算机科学', '编程思想', '命令式编程'],
    type: '基础知识',
  },
  {
    id: 198,
    title: '声明式编程（Declarative[dɪˈklærətɪv] Programming）是什么？',
    answers: [
      `声明式编程，是注重定义程序逻辑和结果的编程范式。`,
      `例子：数据库语言 SQL，正则表达式，标记语言 HTML`,
    ],
    tags: ['计算机科学', '编程思想', '声明式编程'],
    type: '基础知识',
  },
  {
    id: 199,
    title: '排序算法分为哪几类？常见的内部排序算法有哪些？有图',
    answers: [
      `排序算法分为内部排序和外部排序`,
      `插入排序`,
      `希尔排序`,
      `选择排序`,
      `冒泡排序`,
      `归并排序`,
      `快速排序`,
      `堆排序`,
      `基数排序`,
      {
        tag: 'img',
        val: '<img style="width: 100%" src="https://oss.taichiyi.com/markdown/kghpr87l.png" />'
      },
    ],
    tags: ['计算机科学', '算法', '排序算法'],
    type: '基础知识',
  },
  {
    id: 200,
    title: `编码（Encoding）是什么？`,
    answers: [
      `编码是将文字、数字或其它对象编成数码，或将信息、数据转换成规定的电脉冲信号的过程。`
    ],
    tags: ['计算机科学', '编码'],
    type: '基础知识',
  },
  {
    id: 201,
    title: `数字系统中常用的编码有哪几类？`,
    answers: [
      '二进制编码',
      '十进制编码',
    ],
    tags: ['计算机科学', '编码'],
    type: '基础知识',
  },
  {
    id: 202,
    title: `解码（Decoding）是什么？`,
    answers: [
      '解码是将数码还原成它所代表的内容或将电脉冲信号、光信号、无线电波等转换成它所代表的信息、数据等的过程。',
    ],
    tags: ['计算机科学', '编码'],
    type: '基础知识',
  },
  {
    id: 203,
    title: `纯函数，是什么？`,
    answers: [
      `纯函数是相同输入总是返回对应输出的没有副作用的引用透明的函数。`,
    ],
    tags: ['计算机科学', '编程思想', '声明式编程'],
    type: '基础知识',
  },
  {
    id: 204,
    title: `程序是什么？`,
    answers: [
      '计算机程序（Program）是指令序列。',
    ],
    tags: ['计算机科学'],
    type: '基础知识',
  },
  {
    id: 205,
    title: `软件(Software)包括计算机使用的程序和其他操作信息。软件可以由多个__组成。`,
    answers: [
      '程序',
      '软件>程序>应用程序',
    ],
    tags: ['计算机科学'],
    type: '基础知识',
  },
  {
    id: 206,
    title: `应用程序软件(Aplication software)和系统软件(System software)有什么区别？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
相同
  “应用程序软件”和“系统软件”都是一个程序或一组程序。
不同
  “应用程序软件”面向最终用户，依赖于系统软件来执行，无法自行运行。
  “系统软件”面向开发者。
        `,
      },
    ],
    tags: ['计算机科学'],
    type: '基础知识',
  },
  {
    id: 207,
    title: `程序=__+__`,
    answers: [
      '数据结构',
      '算法',
    ],
    tags: ['计算机科学'],
    type: '基础知识',
  },
  {
    id: 208,
    title: `目标程序是什么？`,
    answers: [
      `目标程序是只包含源程序被编译器翻译成的机器语言的程序。`,
    ],
    tags: ['计算机科学', '编译原理'],
    type: '基础知识',
  },
  {
    id: 209,
    title: `定义是什么意思？`,
    answers: [
      '定义是，对事物的本质特征或一个概念的内涵和外延的确切而简要的说明。',
    ],
    tags: ['数学'],
    type: '基础知识',
  },
  {
    id: 210,
    title: `目标程序和可执行文件有什么区别？`,
    answers: [
      '目标程序缺少“启动代码”和“库函数”',
    ],
    tags: ['计算机科学', '编译原理'],
    type: '基础知识',
  },
  {
    id: 211,
    title: `编译是什么？`,
    answers: [
      `编译（全称：编译程序）是把一个源程序翻译成目标程序的工作过程。`,
    ],
    tags: ['计算机科学', '编译原理'],
    type: '基础知识',
  },
  {
    id: 212,
    title: `源代码（也称源程序）是什么？`,
    answers: [
      '源代码（也称源程序）是按照一定的程序设计语言规范书写的未编译的文本文件，是一系列人类可读的计算机语言指令',
    ],
    tags: ['计算机科学'],
    type: '基础知识',
  },
  {
    id: 213,
    title: 'TODO',
    answers: [
      'State 中文称为状态，可以是任意类型的值，但通常是一个可序列化的深层嵌套的对象，所以也称为状态树。',
      '',
      '按照约定，应该尽量保持 State 的可序列化。',
    ],
    tags: [],
    type: '专用领域知识',
  },
  {
    id: 214,
    title: `代码复用是什么？`,
    answers: [
      `代码复用（软件复用）是利用已有的代码，来构造软件的方式。`,
    ],
    tags: ['计算机科学'],
    type: '基础知识',
  },
  {
    id: 215,
    title: `软件复用的抽象级别有哪些？`,
    answers: [
      `代码源代码->程序库->框架`,
      `思想复用：继承/组合->设计模式->分析`,
    ],
    tags: ['计算机科学'],
    type: '基础知识',
  },
  {
    id: 216,
    title: `在面向对象的程序设计（OOP）中，对象之间有哪些表示耦合性的关系？从弱到强说一下`,
    answers: [
      '1.依赖关系',
      '2.关联关系',
      '3.聚合关系',
      '4.组合关系',
      '5.泛化关系和实现关系',
    ],
    tags: ['计算机科学', '编程思想', '命令式编程'],
    type: '基础知识',
  },
  {
    id: 217,
    title: `在面向对象的程序设计（OOP）中，依赖（Dependency）关系是什么？`,
    answers: [
      `依赖（Dependency）关系是对象之间耦合性最弱的临时性的关系。`,
      {
        tag: 'pre',
        val:
          `
在代码中，类的方法通过局部变量、方法的参数或者对静态方法的调用来访问另一个类（被依赖类）中的某些方法来完成一些职责。
例如：
// 被依赖类
class MobilePhone {
  transfer(){
    ...
  }
}
class Person {
  call(mp: MobilePhone){
    mp.transfer();
  }
}
        `,
      },
    ],
    tags: ['计算机科学', '编程思想', '命令式编程'],
    type: '基础知识',
  },
  {
    id: 218,
    title: `在计算机科学中，序列化是什么？`,
    answers: [
      `序列化是将对象转化为可以存储或传输的形式的过程。`,
    ],
    tags: ['计算机科学'],
    type: '基础知识',
  },
  {
    id: 219,
    title: `在面向对象的程序设计（OOP）中，关联关系是什么？分为哪几种？`,
    answers: [
      `关联关系是对象之间的引用关系。`,
      '1.一般关联关系',
      '2.聚合关系',
      '3.组合关系',
    ],
    tags: ['计算机科学', '编程思想', '命令式编程'],
    type: '基础知识',
  },
  {
    id: 220,
    title: `在面向对象的程序设计（OOP）中，聚合（Aggregation[ˌæɡrɪˈɡeɪʃn]）关系是什么？`,
    answers: [
      `聚合关系是整体包含部分的部分可以独立存在的关系。`,
    ],
    tags: ['计算机科学', '编程思想', '命令式编程'],
    type: '基础知识',
  },
  {
    id: 221,
    title: `在面向对象的程序设计（OOP）中，组合（Composition[ˌkɑːmpəˈzɪʃn]）关系是什么？`,
    answers: [
      `组合关系是整体由部分构成的部分不能独立于整体的关系。`,
    ],
    tags: ['计算机科学', '编程思想', '命令式编程'],
    type: '基础知识',
  },
  {
    id: 222,
    title: `在面向对象的程序设计（OOP）中，泛化（Generalization[ˌdʒenrələˈzeɪʃn]）关系是什么？`,
    answers: [
      `泛化关系是对象之间耦合性最大的表示一般与特殊，父类与子类的关系。`,
    ],
    tags: ['计算机科学', '编程思想', '命令式编程'],
    type: '基础知识',
  },
  {
    id: 223,
    title: `在面向对象的程序设计（OOP）中，实现（Realization[ˌriːələˈzeɪʃn]）关系是什么？`,
    answers: [
      `实现关系是接口与实现类之间的关系。`,
      '在这种关系中，类实现了接口，类中的操作实现了接口中所声明的所有的抽象操作。',
    ],
    tags: ['计算机科学', '编程思想', '命令式编程'],
    type: '基础知识',
  },
  {
    id: 224,
    title: `在面向对象中，接口（Interface）是什么？`,
    answers: [
      `接口是只包含属性和方法的定义而不包含实现的约束形式。`,
    ],
    tags: ['计算机科学', '编程思想', '命令式编程'],
    type: '基础知识',
  },
  {
    id: 225,
    title: '介绍一下“冒泡排序”、“选择排序”、“插入排序”、“快速排序”的时间复杂度、空间复杂度、排序方式和稳定性。',
    answers: [
      {
        tag: 'img',
        val: '<img style="width: 100%" src="https://oss.taichiyi.com/markdown/kghpr87l.png" />'
      },
    ],
    tags: ['计算机科学', '算法', '排序算法'],
    type: '基础知识',
  },
  {
    id: 226,
    title: '冒泡排序算法的思想（原理）是什么？哪个排序算法是它的改进算法？',
    answers: [
      '1. 比较两个相邻的元素，如果第一个大于第二个则调换这两个元素位置；',
      /* '2. 从右至左逐渐有序', */
      '快速排序',
    ],
    tags: ['计算机科学', '算法', '排序算法'],
    type: '基础知识',
  },
  {
    id: 227,
    title: '冒泡排序算法的应用场景（优点）是什么？',
    answers: [
      '序列元素越接近正序速度越快。',
    ],
    tags: ['计算机科学', '算法', '排序算法'],
    type: '基础知识',
  },
  {
    id: 228,
    title: '排序算法的稳定性定义是什么？',
    answers: [
      '待排序的序列中，存在多个相同的值，若经过排序，这些值的相对次序保持不变，则算法称为“稳定”，反之。',
    ],
    tags: ['计算机科学', '算法', '排序算法'],
    type: '基础知识',
  },
  {
    id: 229,
    title: 'TODO',
    answers: [
      'Action 是一个表示改变状态的意图的对象。',
      'Action 是将数据存储到 Store 中的唯一方式。',
      'Action 对象必须包含一个 type 属性，表示改变状态的意图。',
    ],
    tags: [],
    type: '专用领域知识',
  },
  {
    id: 230,
    title: '在词语中，术语是什么？',
    answers: [
      '术语是特定学科领域的概念。',
      'terminology',
      `[ˌtɜːrmɪˈnɑːlədʒi]`,
    ],
    tags: ['词语'],
    type: '基础知识',
  },
  {
    id: 231,
    title: '插入排序算法的应用场景（优点）是什么？',
    answers: [
      '序列越接近正序速度越快。',
      '序列的长度 n （<=50）较小时，较快。',
    ],
    tags: ['计算机科学', '算法', '排序算法'],
    type: '基础知识',
  },
  {
    id: 232,
    title: '希尔排序算法的应用场景（优点）是什么？',
    answers: [
      '序列重复率越高，速度越快。',
      '序列的长度 n 较大时，较快。',
    ],
    tags: ['计算机科学', '算法', '排序算法'],
    type: '基础知识',
  },
  {
    id: 233,
    title: '快速排序算法的应用场景（优点）是什么？',
    answers: [
      '序列重复率越低，速度越快。',
      '序列的长度 n 较大时，速度较快。',
    ],
    tags: ['计算机科学', '算法', '排序算法'],
    type: '基础知识',
  },
  {
    id: 234,
    title: '插入排序算法的思想（原理）是什么？',
    answers: [
      '1. 将排序序列第一个元素看做一个有序序列，把其他元素当成是未排序序列。',
      '2. 从头到尾依次扫描未排序序列，将扫描到的每个元素插入有序序列的适当位置。',
    ],
    tags: ['计算机科学', '算法', '排序算法'],
    type: '基础知识',
  },
  {
    id: 235,
    title: '选择排序算法的思想（原理）是什么？',
    answers: [
      '1. 每一个位置选择未排序序列中最小的元素',
      '2. 从左至右逐渐有序',
    ],
    tags: ['计算机科学', '算法', '排序算法'],
    type: '基础知识',
  },
  {
    id: 236,
    title: `怎么组织循环单链表？例如：[{name:'a'},{name:'b'},{name:'c'}]`,
    answers: [
      {
        tag: 'pre',
        val:
          `
1.要注意形成循环，新 node 要先指到第一个 node

伪代码
  newNode.next = node.next
  node.next = newNode
  node = newNode
        `,
      },
    ],
    tags: ['计算机科学', '算法'],
    type: '基础知识',
  },
  {
    id: 237,
    title: '快速排序算法的思想（原理）是什么？',
    answers: [
      {
        tag: 'pre',
        val:
          `
快速排序思想：
  1. 快速排序算法采用了分治策略，怎么分？
  2. 把序列当做一个分区(partition[pɑːrˈtɪʃn])，然后根据基准（pivot[ˈpɪvət]）排序，以基准下标为中心把分区一分为二；
  3. 然后递归此步骤，直至把每个分区分到只有两个元素。
基准下标怎么找？分 3 步。
  1. 选择分区的任意一个元素当做基准（为了简化代码的书写，一般选择分区两端的元素当做基准）。
  2. 小于基准的放左边，大于等于放右边。
  3. 基准所在的下标将分区一分为二。
        `,
      }
    ],
    tags: ['计算机科学', '算法', '排序算法'],
    type: '基础知识',
  },
  {
    id: 238,
    title: '排序算法可以分类为哪些？',
    answers: [
      {
        tag: 'img',
        val: '<img style="width: 100%" src="https://oss.taichiyi.com/markdown/kgnfhya9.png" />',
      }
    ],
    tags: ['计算机科学', '算法', '排序算法'],
    type: '基础知识',
  },
  {
    id: 239,
    title: '写一下，“冒泡排序”、“快速排序”的伪代码？脑里写也行',
    answers: [
      '参看 “排序算法.md”',
    ],
    tags: ['计算机科学', '算法', '排序算法'],
    type: '基础知识',
  },
  {
    id: 240,
    title: 'React Router[ˈraʊtər]（React 路由）是什么？',
    answers: [
      'React Router 是一个基于 React 的声明式的路由库。',
    ],
    tags: ['计算机科学', 'JavaScript', 'React Router'],
    type: '专用领域知识',
  },
  {
    id: 241,
    title: 'React Router 和 客户端(浏览器|普通)路由有什么区别？',
    answers: [
      {
        tag: 'pre',
        val:
          `
映射的区别
  客户端路由映射的是 html 文件
  React Router 映射的是 React 组件
加载的区别
  客户端路由变动需要重新加载页面
  React Router 路由的变动不会重新加载页面
        `,
      },
    ],
    tags: ['计算机科学', 'JavaScript', 'React Router'],
    type: '专用领域知识',
  },
  {
    id: 242,
    title: 'React Router DOM 有几种路由器？说说优缺点',
    answers: [
      {
        tag: 'pre',
        val:
          `
React Router DOM 提供两个路由器：
  BroswerRouter（基于 History API）
  HashRouter（基于 URL Hash）
History API：
  优点
    1. 对服务器端友好，例如：SSR 和 SEO。
    2. URL 更直观，更常见
  缺点
    1. 需要服务器端的支持
    2. 不支持 IE9 及其以下浏览器
URL Hash：
  优点
    1. 浏览器兼容性好
    2. 不需要服务器端的支持。
  缺点
    1. 对服务端不友好（服务器无法获取 hash 的内容）
    2. 需要自己去实现页面锚点导航
          `,
      },
    ],
    tags: ['计算机科学', 'JavaScript', 'React Router'],
    type: '专用领域知识',
  },
  {
    id: 243,
    title: 'React Router 提供了哪几种类型的 <Router> 组件？',
    answers: [
      `<BrowserRouter>`.replace(/</g, '&#60;').replace(/>/g, '&#62;'),
      `<HashRouter>`.replace(/</g, '&#60;').replace(/>/g, '&#62;'),
      `<MemoryRouter>`.replace(/</g, '&#60;').replace(/>/g, '&#62;'),
      `<StaticRouter>`.replace(/</g, '&#60;').replace(/>/g, '&#62;'),
      '以上组件将创建 Browser，Hash，Memory 和 StaticRouter 的 history 实例。',
    ],
    tags: ['计算机科学', 'JavaScript', 'React Router'],
    type: '专用领域知识',
  },
  {
    id: 244,
    title: 'React Router 中，有哪些方式可以访问 history 对象？',
    answers: [
      {
        tag: 'pre',
        val:
          `
- 首先哪些对象存了 history 对象的引用？
  1. React 上下文：RouterContext
  2. React 上下文：HistoryContext
- 答
  1. 要访问 RouterContent 中的 history 对象可以通过高阶组件 withRouter。
  2. 要访问 HistoryContext 可以通过调用 React Router 的 hook 方法 useHistory
        `,
      },
    ],
    tags: ['计算机科学', 'JavaScript', 'React Router'],
    type: '专用领域知识',
  },
  {
    id: 245,
    title: `执行上下文，是什么？`,
    answers: [
      `执行上下文，是包含代码执行时所需信息的环境。`,
      `其中包括 this 引用，以及所有变量、对象和函数定义。`,
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 246,
    title: `光圈是什么？怎么表示光圈的大小？光圈大小、进光量和景深是什么相互关系？`,
    answers: [
      '光圈是一个控制进光量和景深的的装置。',
      '光圈的大小：“F/数值”',
      '光圈越大，进光量越多，景深越浅。',
      '注：光圈F值=镜头的焦距/镜头光圈的直径',
    ],
    tags: ['摄影'],
    type: '基础知识',
  },
  {
    id: 247,
    title: 'React Router 的 <Link> 标签和 <a> 标签有什么区别？',
    answers: [
      {
        tag: 'pre',
        val:
          `
Link 组件渲染到 DOM 中也是 a 标签，他们的区别主要提现在点击后的行为上。
  a 标签：
    - 会触发默认行为，会加载链接指定的页面。
  Link 组件：
    - Link 取消了 a 标签的默认行为。
    - 调用 History API 修改 URL。
    - setState 更新 location 对象，进而触发 React 渲染。
          `,
      },
    ],
    tags: ['计算机科学', 'JavaScript', 'React Router'],
    type: '专用领域知识',
  },
  {
    id: 248,
    title: '高阶组件（HOC，Higher-Order Components）是什么？有什么用？用了什么设计模式？',
    answers: [
      'HOC 是一个参数为组件，返回值为新组件的纯函数。',
      '用作：组件逻辑复用',
      '用了：装饰器模式',
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 249,
    title: 'TODO',
    answers: [
      `Reducer 是一个接受累加值和新值并返回新累加值的纯函数。`,
      `Reducer 和 Array.prototype.reduce 是一个概念。`,
      `纯函数的原因：为了状态可预测。`,
      `[rɪ'djuːsə]`,
    ],
    tags: [],
    type: '专用领域知识',
  },
  {
    id: 250,
    title: '__是 React 中代码复用的基本单元。',
    answers: [
      '组件',
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 251,
    title: `设计模式是什么？`,
    answers: [
      '思维导图走起!',
    ],
    tags: ['设计模式'],
    type: '基础知识',
  },
  {
    id: 252,
    title: `设计模式有哪几个原则？分别是什么？`,
    answers: [
      '思维导图走起!',
    ],
    tags: ['设计模式'],
    type: '基础知识',
  },
  {
    id: 253,
    title: `内聚性是什么？`,
    answers: [
      '内聚性是指将机能相关的程序组合到一个模块的程度。',
      ``,
      `与耦合性是一个相对的概念。`,
    ],
    tags: ['设计模式'],
    type: '基础知识',
  },
  {
    id: 254,
    title: `计算机软件的健壮性（鲁棒性）是什么？`,
    answers: [
      '健壮性是指系统在非预期参数输入的情况下，维持系统稳定的特性。',
    ],
    tags: ['设计模式'],
    type: '基础知识',
  },
  {
    id: 255,
    title: `设计模式怎么分类？是什么？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
设计模式分类
  (一级分类)
  存在的目的
    (二级分类)
    创建型设计模式：描述了创建对象的机制。
    结构型设计模式：描述了如果将对象或类组成更大的结构。
    行为型设计模式：描述了对象或类之间如何分工与协作。
  作用的范围
    (二级分类)
    类设计模式
    对象设计模式
        `,
      },
    ],
    tags: ['设计模式'],
    type: '基础知识',
  },
  {
    id: 256,
    title: `组合模式是什么？应用场景？优缺点？`,
    answers: [
      '思维导图走起!',
    ],
    tags: ['设计模式'],
    type: '基础知识',
  },
  {
    id: 257,
    title: `说说装饰器模式的定义、应用场景和优缺点。`,
    answers: [
      '思维导图走起!',
    ],
    tags: ['设计模式'],
    type: '基础知识',
  },
  {
    id: 258,
    title: `“聚合或组合”与“继承”有什么区别?`,
    answers: [
      '两者工作方式几乎一样，但是“继承”是静态的，“聚合或组合”动态的（运行时可更改）。',
    ],
    tags: ['设计模式'],
    type: '基础知识',
  },
  {
    id: 259,
    title: 'Redux 中，如何判断 prevState 和 nextState 是否变化？如果 reducers 后所有子 state 没有 changed 则父 state 的指针会改变吗？',
    answers: [
      `通过严格相等运算符。`,
      `不会`,
    ],
    tags: ['Redux'],
    type: '专用领域知识',
  },
  {
    id: 260,
    title: `观察者模式是什么？应用场景？优缺点？`,
    answers: [
      '思维导图走起!',
    ],
    tags: ['设计模式'],
    type: '基础知识',
  },
  {
    id: 261,
    title: `轮询是什么？`,
    answers: [
      '轮询是定时向信息源发出询问的获取信息的方法。',
    ],
    tags: ['计算机科学'],
    type: '基础知识',
  },
  {
    id: 262,
    title: `什么时候用轮询？什么时候用观察者模式？`,
    answers: [
      '只有信息源支出观察者模式模式，就用观察者模式。',
      '观察者模式效率高。',
    ],
    tags: ['计算机科学'],
    type: '基础知识',
  },
  {
    id: 263,
    title: `如何为 React Router 添加 Google Analytics?`,
    answers: [
      '通过 history 对象的 listen 方法添加一个观察者就可以了',
    ],
    tags: ['计算机科学', 'JavaScript', 'React Router'],
    type: '专用领域知识',
  },
  {
    id: 264,
    title: `React Router 和 history 库是什么关系？`,
    answers: [
      '简介：React Router 是 history 库的 React 实现。',
      '详细：React Router 使用了 DI 设计模式，把 history 库的实例，当做参数传给 React 元素。',
    ],
    tags: ['计算机科学', 'JavaScript', 'React Router'],
    type: '专用领域知识',
  },
  {
    id: 265,
    title: `React Router 怎样在路由变化时重新渲染一个组件？`,
    answers: [
      '当调用 history 对象的 push、replace 或 触发 PopState 和 HashChange 事件时，会向观察者发出通知。',
      '然后调动 Router 类组件的 setState 方法，更新 location 状态，触发 React 的重新渲染。',
      '注：直接调用 history API 的 pushState 方法，不会触发 history 对象的变化。',
    ],
    tags: ['计算机科学', 'JavaScript', 'React Router'],
    type: '专用领域知识',
  },
  {
    id: 266,
    title: `React 如何判断组件是否需要渲染？`,
    answers: [
      {
        tag: 'img',
        val: '<img style="width: 100%" src="https://oss.taichiyi.com/markdown/kgt7va9x.jpg" />',
      },
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 267,
    title: `说说 React 浅比较算法`,
    answers: [
      '思维导图走起!',
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 268,
    title: `JavaScript 中，有哪几种相等算法？`,
    answers: [
      '相等',
      '严格相等',
      '同值相等',
      '零值相等',
    ],
    tags: ['计算机科学', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 269,
    title: `React Router 怎么获取 URL 的参数？`,
    answers: [
      '通过 history 对象的 location 属性获取。',
    ],
    tags: ['计算机科学', 'JavaScript', 'React Router'],
    type: '专用领域知识',
  },
  {
    id: 270,
    title: `history 库的 push 和 replace 有什么区别？`,
    answers: [
      'push 是往 history 栈顶添加一个新记录',
      'replace 是把 history 栈顶的记录换成一个新的记录',
    ],
    tags: ['计算机科学', 'JavaScript', 'React Router'],
    type: '专用领域知识',
  },
  {
    id: 271,
    title: `如何使用在 React Router 中以编程的方式进行导航？`,
    answers: [
      '通过 history 对象的 push、replace 和 go 等方法。',
    ],
    tags: ['计算机科学', 'JavaScript', 'React Router'],
    type: '专用领域知识',
  },
  {
    id: 272,
    title: `在 JavaScript 中，相等和严格相等有什么区别？`,
    answers: [
      '相等会自动转换值的类型，严格相等不会。',
    ],
    tags: ['计算机科学', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 273,
    title: `在 JavaScript 中，严格相等和同值相等有什么区别？那个方法实现了同值相等算法？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
NaN vs NaN
  严格相等
    false
  同值
    true
+0 vs -0
  严格相等
    true
  同值
    false
        `,
      },
      `同值相等算法，在当值为0时，会判断符号位。`,
      '同值相等算法的实现：Object.is',
    ],
    tags: ['计算机科学', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 274,
    title: `零值相等和同值相等有什么区别？`,
    answers: [
      `在零值相等算法中，正零和负零相等。`,
      {
        tag: 'pre',
        val:
          `
+0 vs -0
  同值
    false
  零值
    true
        `,
      },
    ],
    tags: ['计算机科学', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 275,
    title: `在 JavaScript 中，什么的比较是基于零值相等算法？`,
    answers: [
      'Map 和 Set 的键',
    ],
    tags: ['计算机科学', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 276,
    title: `React Router 是怎么通过 Redirect 函数组件实现重定向的？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
首先明确 Redirect 组件是否为 Switch 组件的子组件？
  是：如果被 Switch 组件匹配成功，默认将调用 history 对象的 replace 方法，把 history 栈顶的记录换成一个新的记录。
  否：直接调用 history 对象的 replace 方法。
`,
      },
    ],
    tags: ['计算机科学', 'JavaScript', 'React Router'],
    type: '专用领域知识',
  },
  {
    id: 277,
    title: `函数柯里化是什么？`,
    answers: [
      '在数学和计算机科学中，柯里化将接受多个参数的函数转换成一系列使用一个参数的函数的技术。',
    ],
    tags: ['计算机科学', '柯里化'],
    type: '基础知识',
  },
  {
    id: 278,
    title: {
      tag: 'pre',
      val:
        `
问题：下文中的柯里化函数“currying”应该怎么实现？

function add(a, b) {
  return a + b;
}
add(1, 2) // 3

const addCurry = currying(add);
addCurry(1)(2) // 3
      `,
    },
    answers: [
      {
        tag: 'pre',
        val:
          `
// 知识点：闭包、作用域
function currying(func) {
  let args = []
  return function f() {
    args = [...args, ...arguments]
    if (args.length < func.length) {
      return f
    } else {
      const result = func.apply(null, args)
      args.length = 0
      return result
    }
  }
}
        `.replace(/</g, '&#60;').replace(/>/g, '&#62;'),
      },
    ],
    tags: ['计算机科学', '柯里化'],
    type: '基础知识',
  },
  {
    id: 279,
    title: `函数式编程有哪些特性（术语）？`,
    answers: [
      '- 不可变性（Immutability、immutable）：变量像数学中的一样，是抽象符号而非内存地址（变量不可变）',
      '- 纯函数（Pure function）：',
      '- 引用透明（Referential transparency）',
      '- 高阶函数（Higher-order function）',
      '- 柯里化（Currying）',
      '- 闭包（Closure）',
      '- 模式匹配（Pattern Match）',
      '- 没有赋值运算、循环语句',
      '- 函数组合（compose）',
    ],
    tags: ['计算机科学', '编程思想', '声明式编程', '函数式编程'],
    type: '基础知识',
  },
  {
    id: 280,
    title: `什么是“思想”？`,
    answers: [
      '思想是“客观存在反映在人的意识中经过思维活动而产生的结果”。',
    ],
    tags: ['词语'],
    type: '基础知识',
  },
  {
    id: 281,
    title: `编程思想（编程范式）是什么？`,
    answers: [
      '是和计算机沟通的方式。',
      '也可以理解为编程风格。',
    ],
    tags: ['计算机科学', '编程思想'],
    type: '基础知识',
  },
  {
    id: 282,
    title: '函数式编程有哪些优缺点（应用场景）？',
    answers: [
      {
        tag: 'pre',
        val:
          `
优点：
  - 没有副作用（side-effect）
  - 引用透明（Referential transparency）：不共享状态，所以不会造成竞争（竞态）条件（Race condition），不需要锁来保护状态，有更好的并行计算，可以更好的利用多核处理器，不是特别关注执行步骤，所以可以“惰性求值”。
  - 可维护性好：代码简洁清晰，容易单元测试和调试。
  - 抽象层次高，颗粒度小，复用性高
缺点：
  - 效率较低
          `
      },
    ],
    tags: ['计算机科学', '编程思想', '声明式编程', '函数式编程'],
    type: '基础知识',
  },
  {
    id: 283,
    title: '命令式编程的优缺点有哪些？',
    answers: [
      {
        tag: 'pre',
        val:
          `
优点：
  - 效率较高
  // - 擅长基于业务逻辑的应用
缺点：
  - 抽象层次底，颗粒度大，复用性底。
  - 副作用过多。
  - 面向对象语言的问题是，它们永远都要随身携带那些隐式的环境(方法和过程都深深地根植于它们所在的环境中，通过状态、依赖和有效作用（available effects）达成。)
        `
      },
    ],
    tags: ['计算机科学', '编程思想', '命令式编程'],
    type: '基础知识',
  },
  {
    id: 284,
    title: '命令式编程的适用场景是什么？',
    answers: [
      `- 处理可变状态`,
      `- 处理 IO`,
    ],
    tags: ['计算机科学', '编程思想', '命令式编程'],
    type: '基础知识',
  },
  {
    id: 285,
    title: '柯里化函数的优点有哪些？',
    answers: [
      '1. 延迟计算',
      '2. 提升函数的复用性',
      // '3. 函数式编程',
    ],
    tags: ['计算机科学', '柯里化', '声明式编程', '函数式编程'],
    type: '基础知识',
  },
  {
    id: 286,
    title: '在计算机科学中，引用透明的定义是什么？',
    answers: [
      '没有使用作用域之外的变量，则称为引用透明。',
      // '输出值只依赖于输入值，则称为引用透明。',
      '引用透明又称为等式正确性。',
    ],
    tags: ['计算机科学', '编程思想', '声明式编程'],
    type: '基础知识',
  },
  {
    id: 287,
    title: '纯函数的优点有哪些？',
    answers: [
      '- 可缓存性（Cacheable）',
      '- 可移植性（Portable）',
      '- 可测试性（Testable）',
      '- 引用透明性（referential transparency）',
      '- 不会造成竞争（竞态）条件（Race condition）',
    ],
    tags: ['计算机科学', '编程思想', '声明式编程'],
    type: '基础知识',
  },
  {
    id: 288,
    title: 'TODO',
    answers: [
      `因为单个页面的状态越来越多，状态的修改逻辑越来越复杂，`,
      `状态的储存与修改，往往散落四处，使得可维护性很差。`,
    ],
    tags: [],
    type: '专用领域知识',
  },
  {
    id: 289,
    title: 'React 中，使用了哪些设计模式？编程思想？和概念？',
    answers: [
      {
        tag: 'pre',
        val:
          `
设计模式
  组合模式
  装饰器模式
  依赖注入模式
编程思想
  函数式编程
  面向对象编程
概念
  上下文切换
  循环单链表
        `,
      },
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 290,
    title: '在 JavaScript 中，prototype 和 __proto__ 有什么区别？',
    answers: [
      `每个 Object 构造函数的实例默认都有 __proto__ 属性。`,
      `除了箭头函数实例以外，每个 Function 构造函数的实例默认都有 prototype 属性`,
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 291,
    title: '在 JavaScript 中，迭代协议是什么？和迭代器模式有什么区别?',
    answers: [
      {
        tag: 'pre',
        val:
          `
迭代协议, 分为两个协议:
  可迭代协议
  迭代器协议
        `
      },
      '没有本质的区别',
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 292,
    title: '在 JavaScript 中，迭代器协议是什么？',
    answers: [
      '迭代器协议是一个定义了对象产生一系列值的协议.',
      {
        tag: 'pre',
        val:
          `
具体还说, 定义了对象必须有一个 next 方法,
  该方法总是返回一个叫做 IteratorResult 的对象,
    IteratorResult 对象可能有一个 boolean 类型的 done 属性(done 为 false，这个属性可缺失),
    可能有任意类型的 value 属性.
        `
      },
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 293,
    title: 'React 的状态和属性有什么区别？',
    answers: [
      '打个比方：组件相当于一个函数，属性相当于函数的参数，状态相当于在函数中声明的变量。',
      '状态和属性都会影响组件的输出。',
      '状态可以通过属性初始化；',
      '它们的主要区别是属性在组件中不会被改变，状态可以通过事件被改变。',
    ],
    tags: ['React'],
    type: '通用领域知识',
  },
  {
    id: 294,
    title: 'JavaScript 中，箭头函数和普通函数的区别有哪些？',
    answers: [
      {
        tag: 'pre',
        val:
          `
箭头函数
  对象
    没有
      原型(prototype)属性
  上下文
    没有
      关键字
        this
    不能使用
        super
        new.target
        arguments
        `,
      },
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 295,
    title: '__（也叫匿名函数），在 JavaScript 中被称为__，通常传递给高阶函数的参数。',
    answers: [
      'lambda 表达式',
      '箭头函数',
    ],
    tags: ['计算机科学', '编程思想', '函数式编程'],
    type: '基础知识',
  },
  {
    id: 296,
    title: '为什么要学习函数式编程？',
    answers: [
      '虽然面向对象的程序设计是目前的主流，但是学习函数式编程能够拓宽视野，因为该技术既能够单独使用，也可以与其他编程范式并用。',
    ],
    tags: ['计算机科学', '编程思想', '声明式编程', '函数式编程'],
    type: '基础知识',
  },
  {
    id: 297,
    title: '函数式编程的目标是什么？',
    answers: [
      '使用函数来抽象作用的数据之上的控制流与操作，从而在系统中消除副作用并减少对状态的改变。',
    ],
    tags: ['计算机科学', '编程思想', '声明式编程', '函数式编程'],
    type: '基础知识',
  },
  {
    id: 298,
    title: '高阶函数是什么？',
    answers: [
      '一个接受至少一个函数作为输入或一个函数作为输出的函数。',
    ],
    tags: ['计算机科学', '编程思想', '声明式编程', '函数式编程'],
    type: '基础知识',
  },
  {
    id: 299,
    title: '在函数式编程中，可以通过高阶函数 compose 和函数链两种方式构建__的、__的代码。',
    answers: [
      '流式',
      '模块化 ',
    ],
    tags: ['计算机科学', '编程思想', '声明式编程', '函数式编程'],
    type: '基础知识',
  },
  {
    id: 300,
    title: '响应式编程是什么？',
    answers: [
      '响应式编程（Reactive Programming），面向数据流和变化传播的异步的编程范式。',
    ],
    tags: ['计算机科学', '编程思想', '声明式编程', '响应式编程'],
    type: '基础知识',
  },
  {
    id: 301,
    title: '闭包（Closures）是什么？',
    answers: [
      '严谨说法：闭包是在函数声明过程中将所在函数的执行上下文的词法环境的指针保存到自身执行上下文的词法环境中的概念。',
    ],
    tags: ['计算机科学', '编程思想', '声明式编程', '函数式编程'],
    type: '基础知识',
  },
  {
    id: 302,
    title: '闭包（Closures）有哪些实际应用？',
    answers: [
      '1. 模拟私有变量',
      '2. 模拟块作用域变量',
      '3. 实现模块化',
    ],
    tags: ['计算机科学', '编程思想', '声明式编程', '函数式编程'],
    type: '基础知识',
  },
  {
    id: 303,
    title: '在 JavaScript 中，创建函数有几种方式？各自的使用场景是什么？',
    answers: [
      {
        tag: 'pre',
        val: `
三种：
- 函数声明
- 函数表达式
- Function 构造函数

场景：
- 函数表达式
  - 需要使用箭头函数时
  - 有时为了避免变量改变后，递归函数内部访问不了自身，就会使用命令函数表达式
  - 不希望变量提升时
- Function 构造函数
  - 需要在运行时，动态创建函数的时候
  - 不需要使用闭包时
- 函数声明
  - 以上场景之外
        `,
      },
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 304,
    title: '函数式编程，是什么？',
    answers: [
      '函数式编程是将计算描述为 Lambda 表达式的编程范式。',
    ],
    tags: ['计算机科学', '编程思想', '声明式编程', '函数式编程'],
    type: '基础知识',
  },
  {
    id: 305,
    title: '从引擎的角度说说，一段 JS 代码是如何执行的？',
    answers: [
      {
        tag: 'pre',
        val:
          `
在执行一段代码前，引擎会首先创建一个执行栈。
然后引擎会创建一个全局执行上下文，创建过程中会初始化变量，创建完后将其 push 执行栈。

然后引擎开始依次执行代码，为变量赋值。
执行过程中，如果有函数声明则会创建一个函数执行上下文，如果有函数调用将会把该函数的执行上下文 push 栈。
然后引擎执行栈顶的上下文，上下文执行完后，会被 pop 出栈。
然后循环这个步骤直到调用栈为空，然后就是事件循环

这个过程中需要说明的是
如果在子函数异步执行过程中，父函数已经 return，引擎会将父函数执行上下文弹出调用栈。
但是父函数的执行上下文不会被 GC，因为子函数的执行上下文与父函数的词法环境形成了闭包，所以子函数依旧可以访问父函数的变量。
        `
      },
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 306,
    title: '函数式编程这种编程范式，主要目的是消除__。',
    answers: [
      '副作用',
    ],
    tags: ['计算机科学', '编程思想', '声明式编程', '函数式编程'],
    type: '基础知识',
  },
  {
    id: 307,
    title: '“命名函数表达式”的函数名相当于通过 __ 关键字声明。',
    answers: [
      'const',
    ],
    tags: ['计算机科学', 'JavaScript', '函数式编程'],
    type: '基础知识',
  },
  {
    id: 308,
    title: '函数响应式编程是什么？',
    answers: [
      '函数响应式编程（Functional Reactive Programming，FRP），是结合了函数式编程和响应式编程优点的编程范式。',
    ],
    tags: ['计算机科学', '编程思想', '声明式编程', '响应式编程'],
    type: '基础知识',
  },
  {
    id: 309,
    title: '尾部调用优化（Tail Call Optimization，TCO），是什么？',
    answers: [
      `尾部调用优化是当递归满足一定条件时的使用新栈帧替换旧栈帧并始终只使用一帧的技术。`,
      `[teɪl] [kɔːl] [,ɒptɪmaɪ'zeɪʃən]`,
    ],
    tags: ['计算机科学', '编程思想', '声明式编程', '函数式编程'],
    type: '基础知识',
  },
  {
    id: 310,
    title: 'ES__ 开始支持 TCO，但是目前没有引擎实现了 TCO。',
    answers: [
      `6`,
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 311,
    title: '满足什么条件时会触发 TCO？',
    answers: [
      `1. 递归函数的最后一个表达式为递归函数自身的调用。`,
      `2. 递归函数为纯函数。`,
    ],
    tags: ['计算机科学', '编程思想', '声明式编程', '函数式编程'],
    type: '基础知识',
  },
  {
    id: 312,
    title: '惰性求值（Lazy Evaluation），是什么？',
    answers: [
      `惰性求值，是当表达式的引用被使用时才对表达式求值的概念。`,
    ],
    tags: ['计算机科学', '编程思想', '声明式编程', '函数式编程'],
    type: '基础知识',
  },
  {
    id: 313,
    title: '及早求值（Early Evaluation），是什么？',
    answers: [
      `及早求值，也叫贪婪求值，是一个计算机科学中的遇到表达式立即求值的概念。`,
    ],
    tags: ['计算机科学', '编程思想', '命令式编程'],
    type: '基础知识',
  },
  {
    id: 314,
    title: '在 JavaScript 中，通过 call 等方式指定 this 时，如果 传入的值是分为有效值和无效值，无效值有哪些？',
    answers: [
      `除了 null 和 undefined 以外的值都是 this 的有效值。`,
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 315,
    title: '及早求值，有什么优点？',
    answers: [
      `- 节省内存`,
      `- 执行速度快`,
    ],
    tags: ['计算机科学', '编程思想', '命令式编程'],
    type: '基础知识',
  },
  {
    id: 316,
    title: '在 JavaScript 中，可迭代协议是什么？',
    answers: [
      '可迭代协议是一个允许定制迭代行为的协议.',
      {
        tag: 'pre',
        val:
          `
具体还说,
  规定了对象必须有一个属性名为 Symbol.iterator 的属性,
  并且值为一个无参数的的函数,
    函数的返回值是一个符合迭代器协议的对象.
        `
      },
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 317,
    title: '__语句，可以使用 Symbol.asyncIterator 执行异步迭代。',
    answers: [
      `for-await-of 循环`,
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 318,
    title: '在 JavaScript 中，instanceof 运算符是怎么工作的？以 objA instanceof objB 为例说明。',
    answers: [
      `如果 objB 的原型（prototype）存在 objA 的原型链上则返回真，反之为假。`,
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 319,
    title: '在 JavaScript 中，所有的函数（函数也属于对象）都是 __的实例，包括它自己（自己实例化自己 囧 ）！',
    answers: [
      `Function 构造函数`,
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 320,
    title: '在 JavaScript 中，Function.prototype 和 Funtion.__proto__ 是一个对象吗？',
    answers: [
      `是一个对象（指向同一个指针）`,
      `自己实例化自己`,
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 321,
    title: '在 JavaScript 中，普通函数和构造函数有什么区别？',
    answers: [
      {
        tag: 'pre',
        val:
          `
首先要了解函数执行上下文这个概念，执行上下文分可以分为两个阶段：创建阶段和执行阶段。
  在创建阶段也就是函数声明时：两者没有区别。
  在执行阶段也就是函数调用时：两个的区别在与 this 关键字的指向，具体区别要看调用方式。
    使用 new 运算符调用函数：函数执行上下文的 this 指向一个新的空对象。
    直接调用函数：参看《JavaScript this 的值是什么》
        `,
      },
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 322,
    title: '在 JavaScript 中，所有的函数都有“原型对象”（ prototype 属性）吗？所有的对象都有 __proto__ 吗？',
    answers: [
      `不是，箭头函数没有。`,
      `是（如果是对象是某个构造函数的实例则会有 __proto__），虽然 Object 构造函数的原型对象 (prototype) 有 __proto__ 属性，但是 属性值为 null。`,
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 323,
    title: '在 JavaScript 中，Function 构造函数的“原型对象”（ prototype 属性）有哪些属性？',
    answers: [
      `1. apply`,
      `2. arguments`,
      `3. bind`,
      `4. call`,
      `5. constructor`,
      `6. length`,
      `7. name`,
      `8. Symbol.hasInstance : 可以自定义 instanceof 的行为`,
      `9. toString`,
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 324,
    title: 'ES3 之前都是通过 arguments.callee 实现函数表达式的递归，为什么？',
    answers: [
      `因为 ES3 以前函数表达式都是匿名的。ES3 开始才允许命名函数表达式。`,
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 325,
    title: '为什么严格模式，不允许使用 arguments.callee ？',
    answers: [
      `arguments.callee 会改变函数 this 的指向。`,
      `访问 arguments 对象比较慢。`,
      `不利于引擎的优化。`,
      {
        tag: 'pre',
        val:
          `
arguments.callee 会改变 this 指向的例子：

(function (num){
  console.log(this);
  if(num<2)return arguments.callee(num+1)
})(1)

第 1 次打印：
Window {window: Window, self: Window, document: document, name: "", location: Location, …}

第 2 次打印：
Arguments [1, callee: ƒ, Symbol(Symbol.iterator): ƒ]
        `,
      }
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 326,
    title: '冯诺依曼结构下的计算机（冯诺依曼机），有几种并行方案？',
    answers: [
      {
        tag: 'pre',
        val:
          `
有 3 种：
  - 锁/原子
  - 不可变
  - 隔离

例子：
C，C++：默认不优先使用任何一种。
Rust：默认使用“不可变”，提供了“锁/原子”而已。
Go，erlang：默认提供“隔离”方式，然后基于“隔离”又提供了一套通讯机制。

函数式编程：不可变
命令式编程：“锁/原子”或“隔离”
        `,
      },
    ],
    tags: ['计算机科学', '编程思想'],
    type: '基础知识',
  },
  {
    id: 327,
    title: 'Lambda 演算是什么？',
    answers: [
      `λ演算，是一套用于研究函数定义、函数应用和递归的形式系统。注：图灵完备。`,
    ],
    tags: ['数学', '计算机科学', '编程思想'],
    type: '基础知识',
  },
  {
    id: 328,
    title: 'Lambda 表达式是什么？',
    answers: [
      `Lambda 表达式，是根据 Lambda 演算定义的函数。`,
    ],
    tags: ['数学', '计算机科学', '编程思想'],
    type: '基础知识',
  },
  {
    id: 329,
    title: '并发，是什么？把这种机制称为什么？',
    answers: [
      `并发（全称“并发运行”）是一个核心以纳秒数量级的时间尺度在一个进程的指令和另一个进程的指令间交错执行的行为。`,
      `操作系统中，把这种交错执行的机制称为“上下文切换”`,
    ],
    tags: ['计算机科学', 'CPU'],
    type: '基础知识',
  },
  {
    id: 330,
    title: '并行，是什么？',
    answers: [
      `在同一时刻发生若干事件。`,
      `注：所以只有多核 CPU 上，才能并行程序。`,
    ],
    tags: ['计算机科学'],
    type: '基础知识',
  },
  {
    id: 331,
    title: '离散，是什么？',
    answers: [
      `离散是一个在数学中用来形容数字不连续的术语。`,
      `是“连续”的反义词`,
    ],
    tags: ['数学'],
    type: '基础知识',
  },
  {
    id: 332,
    title: '响应式编程中，流（Stream）是什么？Stream 是 Reactor 的一部分吧（Stream 应该就是个事件队列）？',
    answers: [
      '流是一个随时间发生有序事件的序列。',
      '很可能',
      '[striːm]',
    ],
    tags: ['计算机科学', '编程思想', '声明式编程', '响应式编程'],
    type: '基础知识',
  },
  {
    id: 333,
    title: '在异步编程模型中，分别有几种获得上个任务执行结果的模型（方式）？他们的优缺点',
    answers: [
      '有两种方式：主动轮询（Proactive）和 响应式（Reactive）。',
      {
        tag: 'pre',
        val:
          `
Proactive
  优点
    容易实现
Reactive
  优点
    效率高
        `,
      },
    ],
    tags: ['计算机科学', '编程思想', '声明式编程', '响应式编程'],
    type: '基础知识',
  },
  {
    id: 334,
    title: '在 Reactive 模型中，Reactor 是什么？Reactor 和 Reactor 之间怎么通信？',
    answers: [
      'Reactor 是处理和发出事件的主体。',
      '他们之间通过消息管道（channel）来传递消息。',
      'Reactor 概念和 ReactiveX 概念 Observable 是一个概念？',
    ],
    tags: ['计算机科学', '编程思想', '声明式编程', '响应式编程'],
    type: '基础知识',
  },
  {
    id: 335,
    title: '在 Reactive 模型中，最核心的是哪些部分？分别有什么作用？',
    answers: [
      `两部分：线程和消息管道。`,
      `线程：用于监听事件。`,
      `消息管道：用于 Reactor 两两间的通信。`,
    ],
    tags: ['计算机科学', '编程思想', '声明式编程', '响应式编程'],
    type: '基础知识',
  },
  {
    id: 336,
    title: `发布订阅（Publisher/Subscriber）模式是什么？与观察者（Observer）模式有什么区别？各举例一个使用场景`,
    answers: [
      '思维导图走起!',
    ],
    tags: ['设计模式'],
    type: '基础知识',
  },
  {
    id: 337,
    title: `景深是什么？`,
    answers: [
      '景深是焦点前后所呈现清晰图像的范围。',
    ],
    tags: ['摄影'],
    type: '基础知识',
  },
  {
    id: 338,
    title: '正则表达式术语，备用状态（saved state）是什么？',
    answers: [
      '备用状态是正则表达式和字符串的位置标记。',
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 339,
    title: '正则表达式优化的主要目标是什么？',
    answers: [
      '减少回溯',
    ],
    tags: ['正则表达式'],
    type: '基础知识',
  },
  {
    id: 340,
    title: `外观模式是什么？有什么优缺点？有哪些应用场景？`,
    answers: [
      '思维导图走起!',
    ],
    tags: ['设计模式'],
    type: '基础知识',
  },
  {
    id: 341,
    title: '中介者模式是什么？有什么优缺点？有哪些应用场景？',
    answers: [
      '思维导图走起!',
    ],
    tags: ['设计模式'],
    type: '基础知识',
  },
  {
    id: 342,
    title: '中介者模式和外观模式有什么区别？',
    answers: [
      {
        tag: 'pre',
        val:
          `
两个模式都是提供一个新对象，让新对象只与目标对象进行交互，
区别就在于目标对象和新对象的关系：
  中介者模式
    新对象是独立于目标对象的，就像是两家人。
  外观模式
    新对象和目标对象是高度联系的，就像是兄弟。
        `,
      },
    ],
    tags: ['设计模式'],
    type: '基础知识',
  },
  {
    id: 343,
    title: `在算法中，时间复杂度是什么？`,
    answers: [
      `时间复杂度是一个描述输入值大小与时间长短关系的函数。`,
    ],
    tags: ['计算机科学', '算法'],
    type: '基础知识',
  },
  {
    id: 344,
    title: `在算法中，空间复杂度是什么？`,
    answers: [
      `空间复杂度是一个描述输入值大小与储存空间大小关系的函数。`,
    ],
    tags: ['计算机科学', '算法'],
    type: '基础知识',
  },
  {
    id: 345,
    title: `在排序算法中，排序方式有哪几种？`,
    answers: [
      `排序方式有两种，“原地排序”和“非原地排序”。`,
    ],
    tags: ['计算机科学', '算法'],
    type: '基础知识',
  },
  {
    id: 346,
    title: `在排序算法中，原地排序是什么？`,
    answers: [
      `原地排序是只利用待排序数据的储存空间进行比较和交换的排序方式。`,
    ],
    tags: ['计算机科学', '算法'],
    type: '基础知识',
  },
  {
    id: 347,
    title: 'TODO',
    answers: [
      `Action Creator 是一个专门创建 Action 或 Async Action 的工厂函数。`,
    ],
    tags: [],
    type: '专用领域知识',
  },
  {
    id: 348,
    title: 'TODO',
    answers: [
      `MiddleWare（中间件） 是一个接受 Dispatch 函数然后返回新 Dispatch 函数的高阶函数。`,
      `通常是将 Async Actions 转为 Actions。`,
      `[ˈmɪdlwer]`,
    ],
    tags: [],
    type: '专用领域知识',
  },
  {
    id: 349,
    title: 'TODO',
    answers: [
      `Store 是拥有存储状态和状态操作方法的对象。`,
    ],
    tags: [],
    type: '专用领域知识',
  },
  {
    id: 350,
    title: 'TODO',
    answers: [
      `Store Creator 是一个创建并返回 Store 对象的函数。`,
    ],
    tags: [],
    type: '专用领域知识',
  },
  {
    id: 351,
    title: 'TODO',
    answers: [
      `Store enhancer 是接受一个 Store Creator 然后返回一个增强后的 Store Creator 的高阶函数。`,
      `[ɪnˈhænsər]`,
    ],
    tags: [],
    type: '专用领域知识',
  },
  {
    id: 352,
    title: 'Redux 中，使用了哪些设计模式？和编程思想？',
    answers: [
      {
        tag: 'pre',
        val:
          `
设计模式
  观察者模式
编程思想
  函数式编程
        `,
      },
    ],
    tags: ['Redux'],
    type: '专用领域知识',
  },
  {
    id: 353,
    title: 'TODO',
    answers: [
      '',
    ],
    tags: [],
    type: '专用领域知识',
  },
  {
    id: 354,
    title: '说说 Redux ToolKit',
    answers: [
      '思维导图走起!',
    ],
    tags: ['Redux'],
    type: '专用领域知识',
  },
  {
    id: 355,
    title: 'TODO',
    answers: [
      '思维导图走起!',
    ],
    tags: [],
    type: '专用领域知识',
  },
  {
    id: 356,
    title: 'redux 是怎么处理异步数据流（操作）的？',
    answers: [
      `通过中间件(middleware)来处理异步数据流。`,
      {
        tag: 'pre',
        val:
          `
以 redux-thunk 为例：
  当 redux-thunk 中间件，接受到 action 并且为函数时，我们把这个函数称为 thunk 函数。
  然后把 store 的 dispatch 和 getState 传参给 thunk 函数。
  thunk 函数执行完异步操作后，再 dispatch action
        `,
      },
    ],
    tags: ['Redux'],
    type: '专用领域知识',
  },
  {
    id: 357,
    title: '说说 react-redux。',
    answers: [
      '思维导图走起!',
    ],
    tags: ['React', 'Redux'],
    type: '专用领域知识',
  },
  {
    id: 358,
    title: 'redux-thunk 是什么？',
    answers: [
      `redux-thunk 是一个支持异步更新 store 的 redux 的中间件(middleware)。`,
    ],
    tags: ['Redux'],
    type: '专用领域知识',
  },
  {
    id: 359,
    title: '在计算机科学中，语法糖是什么？',
    answers: [
      `语法糖是一个在语言层面通过添加语法，来提高代码可维护性和编码效率的技术。`,
      '',
      `没有语法糖，不会影响程序的功能。`,
      `从编译层面来看，只有计算机指令才不是语法糖，编译器都是语法糖行为。`,
    ],
    tags: ['计算机科学'],
    type: '基础知识',
  },
  {
    id: 360,
    title: {
      tag: 'pre',
      val:
        `
在 redux 中
  1. applyMiddleware(a,b) 会返回一个 “createStore”，调用这个 store 的 dispatch 方法，会先调用哪个中间件的 dispatch ？
  2. compose(applyMiddleware(a),applyMiddleware(b)) 会先调用哪个中间件的 dispatch ？
  3. 如果 store 是通过 enhancer 创建，当 disapth 时，会先调用 store 的 dispatch 还是 中间件的 dispatch？
      `,
    },
    answers: [
      `1. 先调用 a 中间件的 dispatch`,
      `2. 先调用 a 中间件的 dispatch`,
      `3. 先调用 中间件的 dispatch`,
    ],
    tags: ['Redux'],
    type: '专用领域知识',
  },
  {
    id: 361,
    title: 'redux-saga 是什么？',
    answers: [
      `redux-saga 是一个为了让副作用更易于管理、更有效的执行、更易于测试和调试 的 redux 的中间件(middleware)。`,
    ],
    tags: ['Redux'],
    type: '专用领域知识',
  },
  {
    id: 362,
    title: 'RxJS 是什么？',
    answers: [
      `RxJS 是一个通过使用 observable 序列来异步编程的基于事件的库。`,
    ],
    tags: ['计算机科学', '响应式编程', 'JavaScript'],
    type: '专用领域知识',
  },
  {
    id: 363,
    title: '响应式编程术语（1/6），Observable 是什么？',
    answers: [
      `Observable(可观察对象) 是多个值的惰性推送集合。`,
      `[əbˈzɜːrvəbl]`,
    ],
    tags: ['计算机科学', '响应式编程'],
    type: '专用领域知识',
  },
  {
    id: 364,
    title: '响应式编程术语（2/6），Observer 是什么？',
    answers: [
      `Observer(观察者) 是可观察对象发送的值的消费者（consumer）。`,
    ],
    tags: ['计算机科学', '响应式编程'],
    type: '专用领域知识',
  },
  {
    id: 365,
    title: 'ReactiveX，使用了哪些设计模式和编程范式？',
    answers: [
      {
        tag: 'pre',
        val:
          `
设计模式：
  观察者模式
  迭代器模式
编程范式
  函数式编程
        `,
      },
    ],
    tags: ['计算机科学', '响应式编程'],
    type: '专用领域知识',
  },
  {
    id: 366,
    title: '响应式编程术语（4/6），Subscription（订阅）是什么？',
    answers: [
      `Subscription 是数据流的容器。`,
    ],
    tags: ['计算机科学', '响应式编程'],
    type: '专用领域知识',
  },
  {
    id: 367,
    title: '响应式编程术语（5/6），Subject (主体) 是什么？',
    answers: [
      `Subject 是支持多播的特殊的 Observable。`,
    ],
    tags: ['计算机科学', '响应式编程'],
    type: '专用领域知识',
  },
  {
    id: 368,
    title: '响应式编程术语（6/6），Scheduler (调度器) 是什么？',
    answers: [
      `Scheduler 是控制着何时启动 subscription 和何时发送通知的对象。`,
      `[ˈskedʒuːlər] `,
    ],
    tags: ['计算机科学', '响应式编程'],
    type: '专用领域知识',
  },
  {
    id: 369,
    title: '响应式编程术语（3/6），Operators (运算符) 是什么？',
    answers: [
      `Operators 是 Observable 类型上的纯函数。`,
    ],
    tags: ['计算机科学', '响应式编程'],
    type: '专用领域知识',
  },
  {
    id: 370,
    title: 'redux-observable 是什么？',
    answers: [
      `redux-observable 是 通过组合和取消 async action 来创建副作用的 redux 的中间件(middleware)。`,
    ],
    tags: ['Redux'],
    type: '专用领域知识',
  },
  {
    id: 371,
    title: `代理模式是什么？有什么优缺点？有哪些应用场景？`,
    answers: [
      '思维导图走起!',
    ],
    tags: ['设计模式'],
    type: '基础知识',
  },
  {
    id: 372,
    title: `单例模式是什么？有什么优缺点？有哪些应用场景？有几种实现方式，各自的特点？`,
    answers: [
      '思维导图走起!',
    ],
    tags: ['设计模式'],
    type: '基础知识',
  },
  {
    id: 373,
    title: '介绍一下 CSS 格式化上下。',
    answers: [
      '思维导图走起!',
    ],
    tags: ['CSS'],
    type: '通用领域知识',
  },
  {
    id: 374,
    title: '介绍一下 CSS 定位。',
    answers: [
      '知识点树走起！',
    ],
    tags: ['CSS'],
    type: '通用领域知识',
  },
  {
    id: 375,
    title: '布局题：div垂直居中，左右10px，高度始终为宽度一半。',
    answers: [
      {
        tag: 'pre',
        val:
          `
问题描述: 实现一个div垂直居中, 其距离屏幕左右两边各10px, 其高度始终是宽度的50%。同时div中有一个文字A，文字需要水平垂直居中。

有两个方案：
1. padding 百分比值的继承
2. calc
        `,
      },
    ],
    tags: ['CSS'],
    type: '通用领域知识',
  },
  {
    id: 376,
    title: 'CSS 画一个大小为父元素宽度一半的正方形',
    answers: [
      {
        tag: 'pre',
        val:
          `
        `,
      },
    ],
    tags: ['CSS'],
    type: '通用领域知识',
  },
  {
    id: 377,
    title: `回调函数(callback)一定是异步的吗？怎么判断回调函数是否为异步？`,
    answers: [
      `回调函数不一定是异步执行的！`,
      `如果回调函数添加微任务或宏任务队列，则可以说这个回调函数是异步执行的。`,
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 378,
    title: '说说 事件循环',
    answers: [
      {
        tag: 'pre',
        val:
          `
        `,
      },
    ],
    tags: ['JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 379,
    title: '在 JavaScript 中，Sets 是什么？',
    answers: [
      'Sets 是有序的不相同的元素集合。',
    ],
    tags: ['计算机科学', '数学', '数据结构', 'JavaScript'],
    type: '基础知识',
  },
  {
    id: 380,
    title: `触发 React 渲染的方式有哪些？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
类组件
  setState
  forceUpdate
函数组件
  useState
  useReducer
        `,
      },
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 381,
    title: `React Context 是为有怎？优缺点？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
是什么？
  React 上下文是可以让不同层级的组件访问同一个数据的对象。
为什么有？
  通常不同组件的需要共享某个数据时，是通过逐层传递 Props 方式。但是中间的某个组件并不需要这个数据，这样违反了迪米特法则，增加了组件的耦合性。
优点
  降低组件的耦合性
缺点
  过多的使用会产生大量的中介对象，增加系统的复杂性
延伸知识点
  设计模式
  React 的执行上下文
        `,
      },
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 382,
    title: `React Context 的 Provider 组件，作用是什么？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
Provider 接受一个 value 属性，用来修改 React Context 对象的值。
        `,
      },
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 383,
    title: `React 中，类组件是如何获取 React Context 的值的？React Context 的值是怎么赋值到类实例的 content 属性的？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
如何获取？
  类组件实例化前，当类组件存在一个静态属性 contextType 时，React 会从 contextType 中读取 这个 React Context 的值，并当做第二个参数，实例化类组件
怎么赋值？
  当实例化类时，父类会把 props 和 context 参数赋值到实例的 props 和 context 属性
        `,
      },
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 384,
    title: `React Context 的 Consumer 组件的作用是什么？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
是什么？
  Consumer 是可以将 Context 传递给子组件的高阶组件。
  React Context 对象有一个 Consumer 属性，属性值指向对象自身。
有什么用？
  函数组件想获取 React Context 的值时，需要把函数组件作为 Consumer 组件的子组件。
        `,
      },
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 385,
    title: `React 是什么？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
React 用于构建用户界面的声明式的 JavaScript 库。
        `,
      },
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 386,
    title: `React V16 对生命周期做了哪些修改？为什么？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
不再推荐使用
  componentWillReceiveProps
  componentWillUpdate
  componentWillMount
新增两个生命周期函数
  static getDerivedStateFromProps
  getSnapshotBeforeUpdate
为什么？
  因为 fiber 的渲染阶段不应该产生用户视觉可见的副作用。
  抽象来说：两个量求差异时，任意一个量都不应该动态变化，不然结果不可预测。
  具体来说：在渲染阶段不应该产生 Update。
  在 will 相关的生命周期中，可以访问类的实例，可能会产生 Update
        `,
      },
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 387,
    title: `React element 是什么？分别介绍一下属性？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
React element 是描述组件属性或宿主元素属性的普通对象。
当元素的 type 是字符串时，它表示宿主元素类型和元素相关的属性。
React element 对象一旦创建就不会对其修改。

总结：React element 只是用来描述 UI 的，不需要解析和实例化。

属性(5)
  $$typeof
    判断此对象是否属于 React
  type
    表示 React 节点的类型
      字符串
        'div', 'span'
      对象
        函数组件
        类组件
  key
    用于判断兄弟间的身份
  ref
    指向宿主的节点
  props
    节点的全部属性
    children?: 子节点
        `,
      },
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 388,
    title: `React 术语，work 是什么？`,
    answers: [
      `work 是从旧树到显示新树的过程中，所需要的计算`,
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 389,
    title: `说说 React 渲染到 DOM 的过程。`,
    answers: [
      {
        tag: 'pre',
        val:
          `
TODO
调用 ReactDom 的 render 方法后，会创建 FiberRootNode 和对应的 FiberNode，然后把 FiberFootNode 挂载在对应的 DOM 节点上。

在 function beginWork 在

在 function updateHostRoot 中，处理 FiberRootNode.current.alternate.updateQueue

function processUpdateQueue() 用来处理当前 fiber 的 updateQueue

  updateQueue 里的 update 是为了更新 queue 的 state

function getStateFromUpdate() 根据 update 的 type 判断计算 state 的方式
  update 的结构有点像 action

function reconcileChildren 这个函数把 fiber updateQueue 得到的 React element 转为 FiberNode
        `,
      },
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 390,
    title: `React 术语，Fiber 是什么？`,
    answers: [
      `Fiber 是一个使用链表来遍历树的协调器。`,
      `展开：Fiber 为什么通过链表(linked list)而不是栈（stack）来遍历组件树？`,
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 391,
    title: `React 术语，React element tree 是什么？和 Virtual DOM(VDOM、虚拟 DOM) 是什么关系？为什么？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
“Virtual DOM”是一个编程中的将 UI 以“虚拟”形式保存在内存中的概念。

为什么
  页面的更新理想情况下，是只修改需要修改的部分。
怎么做
  当页面有更新时，根据更新生成新的“虚拟 DOM”树，然后对比新旧树，得出差异然后把差异更新到 DOM 上。

  需要说明的是，React 中的“虚拟 DOM”就是 React element tree，较早的时候称为“虚拟 DOM”是为了方便大家理解 React，
但现在这个概念容易引起混乱，因为 React element tree 不仅可以通过 ReactDOM 渲染成 DOM，也可以通过 RN 渲染成原生视图.
        `,
      },
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 392,
    title: `React 18 有什么变化？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
1. SSR 支持 Suspense。
2. 对更新的优先级做了 2 点升级
  1. 在并发模式下，所有更新默认是批处理的。如果想同步处理更新可以使用 flushSync 方法
  2. 新增了一个 startTransition 方法，过渡更新
  3. 新增了一个 useDeferredValue 方法
          `,
      },
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 393,
    title: `React 为什么用链表遍历树？`,
    answers: [
      {
        tag: 'pre',
        val: '思维导图走起!',
      },
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 394,
    title: `React 术语，reconciliation 是什么？`,
    answers: [
      `reconciliation(协调) 是一个根据 update 生成新树并找出与旧树差异的过程。`,
      `[ˌrekənsɪliˈeɪʃn]`,
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 395,
    title: `调用了一个 setState 方法后发生了什么？`,
    answers: [
      '思维导图走起!',
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 396,
    title: `React 术语，Renderer 是什么？`,
    answers: [
      `Renderer(渲染器)，根据平台环境将 React Tree 渲染到视图上。`,
      `[ˈrendər]`,
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 397,
    title: `说说 React 的协调器`,
    answers: [
      '思维导图走起!',
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 398,
    title: `说说 React 的调度器`,
    answers: [
      '思维导图走起!',
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 399,
    title: `TODO`,
    answers: [
      `渲染阶段(render phase)`,
      `提交阶段(commit phase)`,
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 400,
    title: `React 中，提交阶段又分为哪几个子阶段？会处理哪些副作用？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
commit phase 子阶段
  before mutation
    Snapshot
    Passive
  mutation
    ContentReset
    Ref
    Placement
    PlacementAndUpdate
    HydratingAndUpdate
    Update
    Deletion
  layout
    Update
    Callback
    Ref
        `,
      },
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 401,
    title: `React Fiber 中，新树（入口）替换旧树是在 提交阶段的哪个子阶段？`,
    answers: [
      `mutation phase 之后`,
      `layout   phase 之前`,
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 402,
    title: `DOM 中，ownerDocument 是什么？`,
    answers: [
      `每个 DOM node(节点) 都会有 ownerDocument 属性，改属性值为当前节点的顶层 document 对象。`,
    ],
    tags: ['计算机科学', 'DOM'],
    type: '通用领域知识',
  },
  {
    id: 403,
    title: `被动事件监听器是什么？为什么有？有什么用？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
是什么？
  被动事件监听器是一个不阻止事件默认行为的监听器。
为什么有？
  在以前只有主动事件监听器，如果 被触摸的 DOM 元素，上有 touch 相关的监听器，当滑动屏幕，
  浏览器会先调用监听器函数，判断是否调用了事件对象的 preventDefault 方法，来取消事件的默认行为（例如：缩放，滚动），
  及时监听器是空函数，执行的时间也足以让用户感觉到卡顿。
有什么用？
  因为被动事件监听器是不会阻止事件默认行为的，所以浏览器不需要等待事件监听器的结果，可以立即响应滚动。

        `,
      },
    ],
    tags: ['计算机科学', 'DOM'],
    type: '通用领域知识',
  },
  {
    id: 404,
    title: `React，为什么 根据 W3C 规范实现了一套事件系统？`,
    answers: [
      `1. 兼容性：为了让事件在不同浏览器中有一致的表现.`,
      `2. 跨平台：像 React tree`,
      `3. 优化：允许根据事件优先级处理事件`,
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 405,
    title: `DOM Levels 是什么？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
DOM Levels 指的是 DOM 的标准。

“DOM Level 1”、“DOM Level 2”就像“HTML4”、“HTML5”

新的 DOM 标准都会在之前的标准上拓展：
  最初的 DOM 标准 Level 1，只是映射文档模型。
  DOM 标准 2，支持了 CSS 和一些事件。
        `,
      },
    ],
    tags: ['计算机科学', 'DOM'],
    type: '通用领域知识',
  },
  {
    id: 406,
    title: `TODO`,
    answers: [
      `Fabric 是 React Native 新的负责 Native 端的渲染器。`,
    ],
    tags: [],
    type: '专用领域知识',
  },
  {
    id: 407,
    title: `进程(process) 是什么？进程这种抽象由什么组成？`,
    answers: [
      `进程是操作系统对一个正在运行的程序的一种抽象。`,
      ``,
      `在一个系统上可以同时运行多个进程，而每个进程都好像在独立地使用硬件。`,
      `进程是计算机科学中最重要和最成功的概念之一`,
      `组成：处理器、虚拟内存、文件`,
      `['prɑses]`,
    ],
    tags: ['计算机科学', '操作系统'],
    type: '基础知识',
  },
  {
    id: 408,
    title: `线程(thread) 是什么？`,
    answers: [
      `一个进程可以由多个称为线程的执行单元组成，每个线程都运行在进程的上下文中，并共享同样的代码和全局的数据。`,
      ``,
      `多线程比多进程之间更容易共享数据。`,
      `[θred]`,
    ],
    tags: ['计算机科学', '操作系统'],
    type: '基础知识',
  },
  {
    id: 409,
    title: `为什么 JavaScript 是单线程？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
如果 Javascript 是多线程的话，在多线程的交互下，处于UI中的 DOM 节点就可能成为一个临界资源，假设存在两个线程同时操作一个 DOM，一个负责修改一个负责删除，那么这个时候就需要浏览器来裁决如何生效哪个线程的执行结果。
当然我们可以通过锁来解决上面的问题。但为了避免因为引入了锁而带来更大的复杂性，Javascript 在最初就选择了单线程执行。
        `,
      },
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 410,
    title: `在 BOM 中，otherWindow.postMessage 是什么？有什么用？怎么用？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
是什么？
  otherWindow.postMessage 是可以“多播”实现跨源通信的方法。
  前提: 得有其他窗口的引用。
有什么用？
  实现线程间的通信，window(iframe) 与 iframe(window)
怎么用？
  otherWindow.addEvenListener('message',e=>{...})
特点
  发送方可以限制目标源
         `,
      },
    ],
    tags: ['计算机科学', '浏览器'],
    type: '通用领域知识',
  },
  {
    id: 411,
    title: `在 BOM 中，MessageChannel 是什么？有什么用？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
是什么？
  MessageChannel 是可以建立“单播”单工消息通道的构造函数。
有什么用？
  实现线程间的通信，worker 与 worker ，window(iframe) 与 iframe(window)
特点
  发送方不可以限制目标源
         `,
      },
    ],
    tags: ['计算机科学', '浏览器'],
    type: '通用领域知识',
  },
  {
    id: 412,
    title: `React 中，调度器是通过 MessageChannel 实现安排浏览器绘制后执行一个 task 的。为什么不是 window.postMessage 或 window.setTimeout ?`,
    answers: [
      {
        tag: 'pre',
        val:
          `
为什么用 MessageChannl 将任务添加到浏览器的任务队列？
  因为消息事件能最快的添加到任务队列，因为是同步添加的。
为什么不是 window.setTimeout ？
  因为不能同步的将任务添加到任务队列。
  setTimeout 添加到任务队列一般要 2 个步骤：
    1. 定时器线程，声明一个定时器
    2. 判断时间满足，则添加到任务队列

为什么不是 window.postMessage ？
  因为当触发 message 事件后，其他的 message 事件处理器也会被调用：
    可能会立即取消事件的传播；
    会加大每一帧的开销。
        `,
      },
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 413,
    title: `FPS 是什么？`,
    answers: [
      'FPS 全称“每秒传输帧数”是测量显示帧数的量度。',
      `别称：帧率(Frame rate)`,
      `单位：FPS、Hz`,
      'Frames Per Second',
    ],
    tags: ['计算机科学', '图形学'],
    type: '基础知识',
  },
  {
    id: 414,
    title: `浏览器中，一个帧的生命周期(pixel pipeline)是怎样的？`,
    answers: [
      {
        tag: 'img',
        val: '<img style="width: 100%" src="https://oss.taichiyi.com/markdown/os0vx8yy.jpg" />',
      },
    ],
    tags: ['计算机科学', '浏览器'],
    type: '基础知识',
  },
  {
    id: 415,
    title: `在计算机科学中，IPC 是什么？`,
    answers: [
      `IPC 全称“进程间通信”是指操作系统提供的允许进程管理共享数据的机制。`,
      `inter-process communication`,
    ],
    tags: ['计算机科学'],
    type: '基础知识',
  },
  {
    id: 416,
    title: `为什么浏览器设计成了多进程架构？`,
    answers: [
      `1. 稳定：避免一个页面奔溃了影响其他页面`,
      `2. 安全：由于 OS 对的 IPC 是有权限控制的，一个 process 就相当与一个沙箱。`,
    ],
    tags: ['计算机科学', '浏览器'],
    type: '基础知识',
  },
  {
    id: 417,
    title: `在浏览器地址栏输入 URL 回车之后发生了什么？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
输入“换行符”前：
  Browser process 的 UI thread 判断输入的是 URL 还是查询词条？
输入“换行符”后：
  UI thread 发起一个 network thread 调用来获取站点内容
  network thread 接受到响应主体后，为了确定数据类型，进行 MIME Type 嗅探，根据响应头属性 Context-Type 判断文件类型
  检查
    域名或响应数据被检查出有恶意行为，network thread 发出报警以显示警告页面，
    CORB(非重点)
  如果是 HTML 文件，则把实际数据(payload) 通过 browser process 传给 renderer process。
  Main thread 开始解析 HTML 文本，构建 DOM 树。
  在解析构建 DOM 时，遇到外部资源，HTML 解析器会生成 token，预加载器会查看 token 并通过 browser process 的 network thread 一个借一个的发出网络请求。
  但是 HTML 解析器 script 标签时，必须加载，解析和执行 JavaScript 后，才继续解析 HTML。
    也可以通过添加 async defer preload 属性来修改 HTML 解析器的行为。
  Main thread 解析 CSS，并向 DOM 节点添加计算样式。
  Main thread Layout(布局): 遍历 DOM 树和 计算 CSS 生成 Layout tree(与 DOM tree)
    伪类不在 DOM 树中，但是在 Layout 树中。
  Main thread Paint: 遍历 Layout 树创建 paint 记录。
  Main thread Composite: 遍历 Layout 树创建 layer tree(Update Layer Tree)
  Main thread Commit 信息给 compositor thread。
  compositor thread: 合成器线程将每个图层栅格化。一层可能像页面的整个长度一样大，因此合成器线程将它们划分为图块，并将每个图块发送给 raster thread。Raster thread 栅格化每个图块(tiles)生成位图(bitmap)。完成后，compositor thread 通过收集全部图块(也称为 draw quads)信息来创建一个 compositor frame(帧)。
  compositor thread: compositor frame 通过 IPC commit 给 browser process。
  browser process: 把所有 compositor frame 发送到 GPU。
  browser process 监听到 renderer process 的 commit，意味这导航完成了，文档的加载阶段开始了。
  当 renderer process 完成渲染将触发 onload 事件，执行完后，向 browser process 发送一个 IPC。
关闭
  当要关闭 Tab 时，会触发 beforeunload 事件。
        `,
      },
    ],
    tags: ['计算机科学', '浏览器'],
    type: '基础知识',
  },
  {
    id: 418,
    title: `浏览器术语，Layout 是什么？`,
    answers: [
      `Layout 是寻找元素几何形状的过程。`,
      `确定单个元素的 大小、形状、换行、位置(x,y) 和 边框的信息。`,
    ],
    tags: ['计算机科学', '浏览器'],
    type: '基础知识',
  },
  {
    id: 419,
    title: `图形学术语，jank(janky) 是什么意思？`,
    answers: [
      `掉帧，的意思`,
      `[dʒæŋk]`,
    ],
    tags: ['计算机科学', '图形学'],
    type: '基础知识',
  },
  {
    id: 420,
    title: `图形学术语，rasterize 是什么意思？`,
    answers: [
      `栅格化是把文档的结构，每个元素的样式，页面的几何形状以及绘制顺序，信息转换成屏幕上的像素的过程。`,
      `[ˈræstəraɪz]`,
    ],
    tags: ['计算机科学', '图形学'],
    type: '基础知识',
  },
  {
    id: 421,
    title: `图形学术语，composite 是什么意思？`,
    answers: [
      `composite 的一种将页面的各个部分分成若干层，分别对其进行栅格化并在称为合成器线程的单独线程中作为页面进行合成的技术`,
      `[kəmˈpɑːzət]`,
    ],
    tags: ['计算机科学', '图形学'],
    type: '基础知识',
  },
  {
    id: 422,
    title: `How to avoid jank in the browser?`,
    answers: [
      {
        tag: 'img',
        val: '<img style="width: 100%" src="https://oss.taichiyi.com/markdown/os0vx8yy.jpg" />',
      },
      {
        tag: 'img',
        val: '<img style="width: 100%" src="https://oss.taichiyi.com/markdown/rmti03jarld.png" />',
      },
      {
        tag: 'img',
        val: '<img style="width: 100%" src="https://oss.taichiyi.com/markdown/yinewse8ibb.jpg" />',
      },
    ],
    tags: ['计算机科学', '浏览器'],
    type: '基础知识',
  },
  {
    id: 423,
    title: `浏览器，Renderer Process 的 Main Thread 流程是什么？`,
    answers: [
      {
        tag: 'img',
        val: '<img style="width: 100%" src="https://oss.taichiyi.com/markdown/os0vx8yy.jpg" />',
      },
    ],
    tags: ['计算机科学', '浏览器'],
    type: '基础知识',
  },
  {
    id: 424,
    title: `taskQueue timerQueue 为什么要分两个队列？`,
    answers: [
      `timerQueue 是个时间触发器队列。用于延迟触发 flushWork`,
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 425,
    title: `React 的 Suspense 是什么? 怎么做?`,
    answers: [
      `
是一个支持按需加载的组件.

Suspense Lazy 两个组件是为有用？
  当 React 渲染遇到 Lazy 组件的时候，会发生什么？
     如果 Lazy 的 status 不是 Resolved，则 throw 一个异常，错误值是一个 Promise。
     然后捕获到这个错误后，就交给 handleError 这个函数处理，实际是 throwException 函数处理。
      沿着父代(workInProgress.return)寻找 Suspense，如果找到的话，
        给 Suspense 记上 DidCaptrue 副作用
        给 Lazy 记上 ForceUpdateForLegacySuspense 副作用，删除 Incomplete 和 LifecycleEffectMask 副作用
      然后从 抛出错误的 Lazy fiber 开始 completeUnitOfWork 知道遇到 Suspense fiber 并且有 DidCaptrue 副作用，
      workInProgress.lanes = renderLanes; return workInProgress，然后继续 workLoop
  Suspense 怎么知道是显示子代还是显示 fallback?
    Suspense 如果不需要展示 fallback 的话，会把子元素包裹在 OffscreenComponent 中

      `,
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 426,
    title: `useEffect 和 useLayoutEffect 有什么区别？`,
    answers: [
      {
        tag: 'pre',
        val:
        `
概况：
  副作用触发的时机不同。
具体：
  layout effect 会在 React 的提交阶段的 layout 子阶段触发，也就是 DOM 变更之后。
  effect 会被加入到浏览器的任务队列等待 flush。
拓展：
  事件循环
        `,
      },
      `useEffect 在 commit phase 的子阶段 layout phase 之前执行。`,
      `useLayoutEffect 在 layout phase 执行，也就是 DOM 变更后同步执行。`,
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 427,
    title: `React Flare，是什么？`,
    answers: [
      `React events 别称 React Flare(内部代号) 是允许行为一致的跨设备和跨平台的高级事件的 React 事件系统的扩展。`,
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 428,
    title: `浏览器中，每帧的事件处理器是怎么执行的？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
chrome，在帧开始后，给 event handlers 的最长运行时间是 100ms，
  所以一帧内可以调用多个 event handler;
  至少调用一个 event handler。
        `,
      },
    ],
    tags: ['计算机科学', '浏览器'],
    type: '基础知识',
  },
  {
    id: 429,
    title: `React V16 -> V17 有哪些变化？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
是什么？
  V17 是允许一个应用中有多个 React 版本。
为什么？
  因为一个大型应用中可能有不同大版本的 React 例如 V15 和 V16。
  在 V17 以前，这两个版本的 React 的事件系统可能会相互干扰，会存在出现未知风险。
有什么用？

  事件系统
    1. 事件委托，事件委托的节点由 document 节点，改为“根容器”节点。
      为什么
        在 17 版本以前，如果一个应用有 2 个及以上的 React 版本，事件系统之间可能会相互干扰。
    2. 删除事件池
      事件池是在高频创建事件对象的情况下通过复用之前的事件对象节省开销的一个技术。
      但实际上并没有节省多少开销，反而增加了代码的复杂性。
    3. 用 focus/blur 替代 focusin/focusout
      在 React 事件系统中 除了 scroll 事件之外，都会冒泡
    4. scroll event 不会再冒泡。
  New JSX Transform
    是什么？
      从 React 中剥离出来的专门给编译器用的 jsx runtime。
    为什么？
      有时候函数组件只是单纯的创建无状态的 React tree 时，没必要引入整个 React 库。
      简化和提高性能
        `,
      },
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 430,
    title: `React 中，setState 是同步的还是异步的？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
需要先介绍一下 React 的更新机制
  当产生 update 时(例如: setState)，React 会安排 React 树更新(scheduleUpdateOnFiber)。
  出于性能考虑 React 会根据当前自身的执行上下文判断是否需要立即更新，否则等待其他 update 批量更新

所以，结论是要看当时 React 的执行上下文才能确定是异步还是同步。

一般来说
  如果在更新实在事件处理函数(onCick)中产生，则会异步更新。
  在任务队列(setTimeout, then)中产生，则会同步更新
        `,
      },
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 431,
    title: `In JavaScript，The expression returns true when value not equel to undefined and null. How to write this expression？`,
    answers: [
      `value != null`,
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 432,
    title: `React 中，如何避免不必要的 render？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
1. 减少渲染的触发
2. 避免重复渲染
3. 避免重复计算
        `,
      },
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 433,
    title: `What is BCD code?`,
    answers: [
      `BCD code is a class of binary encodings of decimal numbers.`,
      `Binary-coded decimal aka BCD.`,
    ],
    tags: ['计算机科学', '编码'],
    type: '基础知识',
  },
  {
    id: 434,
    title: 'What is "aka"?',
    answers: [
      'aka = also known as',
    ],
    tags: ['词语'],
    type: '基础知识',
  },
  {
    id: 435,
    title: `What is BitMask(位掩码)?`,
    answers: [
      `BitMast is bit operation that masks specified bit by operating with the target binary number.`,
      `Binary-coded decimal aka BCD.`,
    ],
    tags: ['计算机科学', '编码'],
    type: '基础知识',
  },
  {
    id: 436,
    title: `What is words in computer science?`,
    answers: [
      `Word is the length of data accessed, transmitted and processed in a single time when the computer processes data.`,
      `字是计算机处理数据时单次存取、传输和加工的数据长度。`,
    ],
    tags: ['计算机科学'],
    type: '基础知识',
  },
  {
    id: 437,
    title: '抽象是什么？为什么有有什么用？',
    answers: [
      '抽象是找共同点的过程。',
      '为什么有：为了更好的理解事物。',
      '有什么用：更好的看清事物的本质，更好的解决问题。',
    ],
    tags: ['词语'],
    type: '基础知识',
  },
  {
    id: 438,
    title: `单线程和多线程，多线程的优点？`,
    answers: [
      `提高进程 IO 时，CPU 的利用率`,
    ],
    tags: ['计算机科学', '操作系统'],
    type: '基础知识',
  },
  {
    id: 439,
    title: `GPU 是什么？优缺点？`,
    answers: [
      'GPU 是由成千上万个微核组成的处理器。',
      '优点：擅长处理大量并行简单运算。例如：图形渲染，加密，处理网络传输。',
      '缺点：不擅长串行任务，很难编程。',
    ],
    tags: ['计算机科学', 'GPU'],
    type: '基础知识',
  },
  {
    id: 440,
    title: `存储器是什么？`,
    answers: [
      '存储器是用来存储数据和指令的记忆部件。',
    ],
    tags: ['计算机科学', 'Memory'],
    type: '基础知识',
  },
  {
    id: 441,
    title: `存储器的理想条件是什么？为了达到理想条件使用了哪种实现的方式？存储器的典型访问时间排行是什么？`,
    answers: [
      '理想条件：1. 速度快 2. 足够大 3.价格便宜',
      '使用了分层次的结构。',
      '寄存器 < 高速缓存 < 主存 < 磁盘',
      '1ns   < 2ns    < 10ns < 20ms',
      '<1KB  < 4MB    < 1-8G < >1TB',
    ],
    tags: ['计算机科学', 'Memory'],
    type: '基础知识',
  },
  {
    id: 442,
    title: {
      tag: 'pre',
      val:
        `
想想下面语句的 yield 简化写法该怎么写？
function* generatorFn(){
  for(const x of [1,2,3]){
    yield x
  }
}
        `
    },
    answers: [
      {
        tag: 'pre',
        val:
          `
function* generatorFn(){
  yield* [1,2,3]
}
          `,
      }
    ],
    tags: ['计算机科学', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 443,
    title: `DOM 中，删除某个 node 的所有子 node 的方式有哪些？速度都怎么样？为什么？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
主要有 3 中方式
  1:
    while(myNode.firstNode) myNode.removeChild(myNode.lastChild)
  2:
    myNode.textContent = ''
  3:
    myNode.innerHTML = ''

速度
  1 > 2 > 3
因为
  innerHTML 需要调用浏览器的解析器(parser)
  textContent 会创建一个 "#text" node
        `,
      },
    ],
    tags: ['计算机科学', 'DOM'],
    type: '通用领域知识',
  },
  {
    id: 444,
    title: `DOM 中，有哪些元素可以自动获取焦点？`,
    answers: [
      'input',
      'select',
      'textarea',
      'button',
    ],
    tags: ['计算机科学', 'DOM'],
    type: '通用领域知识',
  },
  {
    id: 445,
    title: '在表格中，n/a 是什么意思？',
    answers: [
      `n/a 全称：Not Applicable，意思是：不适用`,
      `n/a 一般在无对应选项但又不能为空的时候。`,
    ],
    tags: ['词语'],
    type: '基础知识',
  },
  {
    id: 446,
    title: 'TODO',
    answers: [
      '有队列的结构，没有队列的行为。例如：选取任务但是任务没有出列。',
    ],
    tags: ['计算机科学', '浏览器'],
    type: '通用领域知识',
  },
  {
    id: 447,
    title: `计算机中，文件通常可以分为哪两种？`,
    answers: [
      '二进制文件',
      '文本文件',
    ],
    tags: ['计算机科学'],
    type: '基础知识',
  },
  {
    id: 448,
    title: `计算机中，文本文件是什么？`,
    answers: [
      '由字符构成的文件称为文本文件',
    ],
    tags: ['计算机科学'],
    type: '基础知识',
  },
  {
    id: 449,
    title: `计算机中，bit 全称是什么？中文有哪些称呼？`,
    answers: [
      'bit 英文全称：binary digit，二进制位',
      '中文称为：比特、位',
    ],
    tags: ['计算机科学'],
    type: '基础知识',
  },
  {
    id: 450,
    title: `DOM 中，ContinuousEvent(连续事件)有哪些？`,
    answers: [
      'focusin',
      'focusout',
      'dragenter',
      'dragleave',
      'mouseover',
      'mouseout',
      'pointerover',
      'pointerout',
      'gotpointercapture',
      'lostpointercapture',
    ],
    tags: ['计算机科学', 'DOM'],
    type: '通用领域知识',
  },
  {
    id: 451,
    title: `为什么要了解编译系统？`,
    answers: [
      '优化程序性能',
      '理解链接时出现的错误',
      '避免安全漏洞，例如：缓冲区溢出',
    ],
    tags: ['计算机科学'],
    type: '基础知识',
  },
  {
    id: 452,
    title: `从 C 语言源文件到目标文件，依次经过哪 4 个程序?`,
    answers: [
      '1. 预处理器',
      '2. 汇编器',
      '3. 编译器',
      '4. 链接器',
    ],
    tags: ['计算机科学', '编译原理'],
    type: '基础知识',
  },
  {
    id: 453,
    title: `在 React 中，受控组件(controlled component)是什么？有哪些？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
3 种
- input
- textarea
- select

受控组件，是表单元素的值和 React 的状态相关联的组件。

入队条件
(elem.nodeName === select || (elem.nodeName === input && elem.type === file)) &&
domEventName === change

(elem.nodeName === input || elem.nodeName === textarea) &&
(domEventName === input || domEventName === change) &&
tracker.value !== elem.value

出队条件
(elem.nodeName === input || elem.nodeName === textarea || elem.nodeName === select) &&
(elem.checked !== null && elem.checked !== undefined) ||
(elem.value !== null && elem.value !== undefined)

          `,
      },
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 454,
    title: `操作系统的基本功能或者说基本作用是什么？`,
    answers: [
      `- 防止硬件被失控的引用程序滥用`,
      `- 向应用程序提供简单的一致的机制来控制复杂的通常不相同的低级硬件设备`,
    ],
    tags: ['计算机科学', '操作系统'],
    type: '基础知识',
  },
  {
    id: 455,
    title: `操作系统有几个基本的抽象概念？`,
    answers: [
      `进程`,
      `虚拟内存`,
      `文件`,
      `虚拟机`,
    ],
    tags: ['计算机科学', '操作系统'],
    type: '基础知识',
  },
  {
    id: 456,
    title: `为什么常用十六进制表示法来描述位模式？`,
    answers: [
      `二进制表示法：太长`,
      `十进制表示法：与位模式相互转化很麻烦`,
    ],
    tags: ['计算机科学'],
    type: '基础知识',
  },
  {
    id: 457,
    title: `多字节对象在内存上是连续的吗？怎么表示对象的地址？`,
    answers: [
      '几乎在所有的机器上，多字节对象被存储为连续的字节序列',
      '对象的地址为所使用字节中最小的地址',
    ],
    tags: ['计算机科学', 'Memory'],
    type: '基础知识',
  },
  {
    id: 458,
    title: `在 JavaScript 中，isNaN 和 Number.isNaN 有什么区别？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
isNaN(x)
  可以理解为 x == NaN
  x 的类型如果不为 number 的话，会先进行类型转换
Number.isNaN(x)
  可以理解为 x === NaN
        `,
      },
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 459,
    title: `为什么操作系统提供了许多层次的抽象？`,
    answers: [
      `为了隐藏实际的复杂度`,
    ],
    tags: ['计算机科学', '操作系统'],
    type: '基础知识',
  },
  {
    id: 460,
    title: `在 JavaScript 中，isNaN 和 Number.isNaN 有什么区别？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
isNaN(x)
  可以理解为 x == NaN
  x 的类型如果不为 number 的话，会先进行类型转换
Number.isNaN(x)
  可以理解为 x === NaN
        `,
      },
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 461,
    title: `位向量是什么？`,
    answers: [
      `位向量就是固定长度为 w、由 0 和 1 组成的串。`,
    ],
    tags: ['计算机科学', 'Memory'],
    type: '基础知识',
  },
  {
    id: 462,
    title: `机器支持哪两种形式的右移？JavaScript 中怎么表示？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
逻辑右移和算术右移。
在 JavaScript 中的表达方式：
  逻辑右移 >>>
  算术右移 >>
        `,
      },
    ],
    tags: ['计算机科学'],
    type: '基础知识',
  },
  {
    id: 463,
    title: `Ajax 是什么？`,
    answers: [
      `Ajax 是一个流行词语，意思是：网页可以在不刷新的情况下通过 JavaScript 发出 HTTP 请求。`,
      `在 Web API 中目前有两种 Ajax 实现：XMLHttpRequest 和 Fetch`,
    ],
    tags: ['计算机科学', 'DOM'],
    type: '通用领域知识',
  },
  {
    id: 464,
    title: `在浏览器中，JavaScript 可以设置请求头吗？`,
    answers: [
      `在用户代理中，脚本可以设置部分请求头。`,
    ],
    tags: ['计算机科学', '浏览器'],
    type: '通用领域知识',
  },
  {
    id: 465,
    title: `补码编码是什么？`,
    answers: [
      `是计算机表示负数的方式。`,
    ],
    tags: ['计算机科学', '编码'],
    type: '基础知识',
  },
  {
    id: 466,
    title: `在 JavaScript 中，字符串是通过什么编码方式来保存在内存中的？`,
    answers: [
      `UTF-16`,
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 467,
    title: `在 计算机 中，有符号数到无符号数的隐式转换，往往会导致错误和漏洞。一般怎么避免这个问题？`,
    answers: [
      `只使用有符号数。`,
      `除了 C 语言外，很少有语言支持无符号整数。`,
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 468,
    title: 'React 事件和 DOM 事件有什么区别？',
    answers: [
      {
        tag: 'pre',
        val:
          `
3 个方面
  事件的订阅
    React
      - React 17 后，事件的订阅会委托到容器节点
      - 只能在元素属性上添加事件处理器
      - 事件名使用小驼峰命名
      - 每个元素的每种事件只能添加一个事件处理器
    DOM
      DOM0级
        只能在元素属性上添加事件处理器
      DOM2级
  事件的传播
    React
      所有事件都会冒泡
    DOM
      focus, blur 事件不会冒泡
  事件的处理
    React
      不支持通过 return false 来阻止事件的默认行为
        `,
      },
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 469,
    title: `React 有什么特点？（与 Vue、Angular）`,
    answers: [
      {
        tag: 'pre',
        val:
          `
1. 声明式的
2. 基于组件的
3. 多端复用的
        `,
      },
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 470,
    title: `口喷 Promise 核心库。`,
    answers: [
      {
        tag: 'pre',
        val:
          `
核心概念：
2. promise 的 state 和 value 由 一个 then 函数决定
3. promise 的 state 由 then 函数的参数决定
4. promise 的 value 由 then 函数的来源决定

声明一个 Promise 构造函数，
函数有一个形参，是一个 then 函数， promise 有两类 then 函数，分别是内部 then 和外部 then，不同的 then 会影响 promise 的 value。
属性 state 表示 promise 的状态，
有 4 个枚举值：
0 表示进行中；
1 表示已完成；
2 表示已拒绝；
3 表示替换，此时 value 是一个 promise，使用这个 promise 替换当前 promise；
默认为进行中
属性 value 表示 promise 的值，默认为 null；
属性 deferreds 表示“延迟的 promise 数组”，需要等待父 promise 确定了才执行，
默认值为空数组。

方法 then ，属于内部 then，有两个形参：
第一个是“完成函数”，如果用户调用此函数，所属的 promise 的状态将改为已完成。
第二个是“拒绝函数”，如果用户调用此函数，所属的 promise 的状态将改为已拒绝；

接下来描述一下构造函数的主体逻辑，
如果 then 是内部 then 则直接返回 this，
如果是外部 then ，则交给“外部 then 处理器”，构造函数的主体逻辑就完了。


接下来声明一个“外部 then 处理器”，它是个函数，有两个形参，
第一个是 promise ，表示 promise 对象，
第二个是 then ，表示“外部 then 函数”
接下来介绍函数主体逻辑，
使用 let 关键字声明一个默认值为 false 的 done 变量，用于限制“完成函数”和“拒绝函数”的调用，因为 promise 的状态只能改变一次，
然后声明一个 try catch，在 try 块中声明一个“完成函数的包装函数”和一个“拒绝函数的包装函数”，
“完成函数的包装函数”有一个 value 形参，表示 promise 对象 value 的值，
接下来是函数主体逻辑，
如果 done 为 true，则函数直接 return，
如果为 false，则把 true 赋值给 done 变量，并调用“完成函数”；
“拒绝函数的包装函数”同理；
以“完成函数的包装函数”和“拒绝函数的包装函数”为参数，调用 then 函数
如果捕获到异常，如果 done 为 true 则 return，否则把 true 赋值给 done 变量，并调用“拒绝函数”。


接下来声明一个 reject 函数，也就是“拒绝函数”，
函数有两个形参，
一个是 promise，表示 promise 对象，
一个是 value，表示 promise 对象的值，
然后是函数的主体逻辑，
将 promise state 设置为已拒绝，
把参数 value 赋值到 promise 的 value 属性，
调用“执行延迟 promise”函数。


接下来声明“执行延迟 promise”函数，
函数有一个 promise 形参，表示 promise 对象，
接下来是函数主体，
循环“延迟的 promise 数组”，
循环体中只调用了“内部 then 处理器”这一个函数，
循环结束，将空对象赋值到“延迟的 promise 数组”

接下来声明“内部 then 处理器”，
函数有两个形参，
第一个形参是 promise，表示 promise 对象，
第二个形参是“子 promise 信息”，
然后是函数主体，
while 循环判断 promise 的状态是“替换”，则把 promise 的 value 属性赋值到当前 promise。
如果状态是进行中，则把“子 promise 信息” push 到“延迟的 promise 数组”，并 return。
否则，把这个两个形参绑定到“内部 then 处理器实现”函数，
然后把绑定后的函数作为参数，调用“入队任务”函数，
“入队任务”函数会把参数透传给“尽快调用”函数，
“尽快调用”函数，会通过 setTimeout 函数把“绑定后的函数”尽快加入到任务队列中，等待下一个 tick。

接下来声明“子 promise 信息”对象构造函数
有三个形参：
第一个是“子 promise ”
第二个是“子 promise ”的完成函数
第三个是“子 promise ”的拒绝函数
有三个属性：
第一个是 promise，也就是“子 promise ”
第二个是“子 promise ”的完成函数，如果完成函数不是函数类型，则设置为 null
第三个是“子 promise ”的拒绝函数，如果拒绝函数不是函数类型，则设置为 null



接下来声明“内部 then 处理器实现”，
形参和“内部 then 处理器”一样，
然后是函数主体，
根据父 promise 的状态，获取回调函数，例如：如果是已完成，回调函数是“完成函数”，否则是“拒绝函数”，
如果回调函数为 null，
如果“父 promise”的状态是已完成，
则把“子 promise”和“父 promise”的 value 作为参数，调用“完成函数”，反之，调用“拒绝函数”，然后 return
回调函数不为 null，则声明一个 try catch，
以“父 promise”的 value 为参数调用回调函数，然后得到回调函数的返回值，
以“子 promise”和回调函数的返回值，为参数，调用“完成函数”，
如果捕获到异常，则在 catch 块中，以“子 promise”和错误对象为参数，调用“拒绝函数”


接下来声明一个 resolve 函数，也就是“完成函数”，
形参和“拒绝函数”的形参是一样的
然后是函数主体逻辑，
如果 value 不等于 null 并且是对象或函数类型，并且严格相等于 promise 实参，则调用“拒绝函数”，并 return；
如果 value 属于 promise 构造函数的实例，
把 promise 的状态改为“替换”，把值改为 value，然后以 promise 对象为参数调用“执行延迟 promise”函数，并 return；
在 try 块中尝试读取 value 的 then 属性，如果捕获到异常则调用“拒绝函数”，并 return，
如果 then 是函数类型，则以 promise 对象，then 绑定 value 后的函数，为参数调用“外部 then 处理器”，并 return；

将 promise 的状态改为“已完成”，
将 value 赋值到 promise 的 value，
以 promise 为参数，调用“执行延迟 promise”函数。

        `,
      },
    ],
    tags: ['计算机科学', '程序设计语言', 'JavaScript'],
    type: '通用领域知识',
  },
  {
    id: 471,
    title: `JSX 是为怎？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
是什么？
  JSX 是一个类似于 XML 的语法拓展。用于对 UI 进行声明式描述。
  在 React 中，是 createElement 函数的语法糖。
为什么？
  表达能力更强，可读性更好
怎么做？
  通过转译器
        `,
      },
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 472,
    title: `React 元素 是什么？组件是什么？有什么区别？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
是什么？
  React 元素是一个用来描述组件属性或宿主元素属性的普通对象。
  元素的类型有两种：
    - 组件
    - 宿主元素

组件是什么？
  组件是独立的、可复用的 React 代码。

        `,
      },
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 473,
    title: `React，什么时候使用函数组件？什么时候使用类组件？`,
    answers: [
      {
        tag: 'pre',
        val:
          `
有两种情况需要使用类组件：
  1. 如果是要实现错误边界组件时。
  2. 如果要使用一些特殊的生命周期函数时

其他情况下，使用类组件和函数组件都可以。
        `,
      },
    ],
    tags: ['React'],
    type: '专用领域知识',
  },
  {
    id: 474,
    title: 'React 组件的状态，为什么只能通过相关的函数修改，不能直接通过变量修改？有展开问题',
    answers: [
      {
        tag: 'pre',
        val:
          `
这跟 React 树（虚拟 DOM）的更新机制有关。
在 React 中，只有 Update 对象才能导致 React 树变化。
展开：哪些函数能产生 Update 对象：1，2，3，4
        `,
      }
    ],
    tags: ['React'],
    type: '专用领域知识'
  },
  {
    id: 475,
    title: 'React 的合成事件是什么？',
    answers: [
      '合成事件是根据 W3C 规范实现的跨浏览器的事件对象。',
    ],
    tags: ['React'],
    type: '专用领域知识'
  },
  {
    id: 476,
    title: 'React 中，说说 Mixin -> Render Props -> 高阶组件 的演变。',
    answers: [
      {
        tag: 'pre',
        val:
        `
为什么
  为了解决横切关注点（代码复用）
演变
  Mixin 缺点
    1. 可能会相互依赖，相互耦合，不利于代码维护。
    2. 不同的 Mixin 中的名称可能会冲突。
  Render Props 缺点
    1. 层层嵌套
    2. 需要修改组件结构
  高阶组件 缺点
    1. 需要遵守约定，否则会降低 高阶组件 灵活性以及复用性
        `,
      },
    ],
    tags: ['React'],
    type: '专用领域知识'
  },
  {
    id: 477,
    title: 'React 的插槽(Portals)是什么？有什么用？实现原理？',
    answers: [
      'Portals 是一种将子节点渲染的 DOM 中任意地方的方案。',
      '原理：在渲染阶段，创建 Protal 会把“DOM 容器节点”和“子节点”保存在 fiber 的 stateNode 属性上',
      '接上：在提交阶段，处理 mutation 副作用时，把“子节点”插入“DOM 容器节点”',
    ],
    tags: ['React'],
    type: '专用领域知识'
  },
  {
    id: 478,
    title: 'HTTP 的报文（Message）结构是怎样的？',
    answers: [
      '起始行(Start line)，分两种',
      '报文头(Message header)，分四类',
      '回车换行(CRLF)',
      '报文体(Message body)',
    ],
    tags: ['计算机网络', 'HTTP'],
    type: '基础知识'
  },
  {
    id: 479,
    title: '介绍一下 HTTP 的请求方法。',
    answers: [
      '8 种'
    ],
    tags: ['计算机网络', 'HTTP'],
    type: '基础知识'
  },
  {
    id: 480,
    title: 'GET 和 POST 的区别。',
    answers: [
      '有两个角度，每个角度有两个点。'
    ],
    tags: ['计算机网络', 'HTTP'],
    type: '基础知识'
  },
  {
    id: 481,
    title: '说说 HTTP 缓存',
    answers: [],
    tags: ['计算机网络', 'HTTP'],
    type: '基础知识'
  },
  {
    id: 482,
    title: '介绍一下 HTTP 特点。',
    answers: [
      '无状态',
      '可靠传输（TCP）',
      '请求-响应',
    ],
    tags: ['计算机网络', 'HTTP'],
    type: '基础知识'
  },
  {
    id: 483,
    title: '说说 布局',
    answers: [
      ''
    ],
    tags: ['CSS'],
    type: '基础知识'
  },
  {
    id: 484,
    title: '说说 HTTPS',
    answers: [
      '',
    ],
    tags: ['计算机网络', 'HTTP'],
    type: '基础知识'
  },
  {
    id: 485,
    title: '对于定长或不定长的请求体，HTTP 是怎么传输的？',
    answers: [
      '如果是定长，则在请求头中指定 Content-Length 字段的大小。',
      '如果是不定长，把请求头中 Transfer-Encoding 字段的值设置为 chunked。',
    ],
    tags: ['计算机网络', 'HTTP'],
    type: '基础知识'
  },
  {
    id: 486,
    title: 'HTTP 如何处理大文件的传输？',
    answers: [
      '通过 Range 相关的头字段',
    ],
    tags: ['计算机网络', 'HTTP'],
    type: '基础知识'
  },
  {
    id: 487,
    title: 'React Hook 为什么只能在函数最外层使用？',
    answers: [
      '为了保证 Hook 每一次渲染都能被调用，并且按照同样的顺序被调用。',
    ],
    tags: ['React'],
    type: '专用领域知识'
  },
  {
    id: 488,
    title: '说一下 React Hook 的工作原理。',
    answers: [
      'TODO',
    ],
    tags: ['React'],
    type: '专用领域知识'
  },
  {
    id: 489,
    title: 'CSS，三个元素如何“品”字布局？',
    answers: [
      '1. margin + calc',
      '2. float + translate',
    ],
    tags: ['CSS'],
    type: '通用领域知识'
  },
  {
    id: 490,
    title: '说说 垂直居中',
    answers: [
      '知识点树走起！',
    ],
    tags: ['CSS'],
    type: '基础知识'
  },
  {
    id: 491,
    title: '介绍一下 HTTP Cookie',
    answers: [
      '知识点树走起！',
    ],
    tags: ['计算机网络', 'HTTP'],
    type: '基础知识'
  },
  {
    id: 492,
    title: '介绍一下 HTTP/2',
    answers: [
      '知识点树走起！',
      '是什么 -> 背景 -> 报文 -> 优点',
    ],
    tags: ['计算机网络', 'HTTP'],
    type: '基础知识'
  },
  {
    id: 493,
    title: '介绍一下 TCP 的握手',
    answers: [
      '知识点树走起！',
    ],
    tags: ['计算机网络', 'TCP'],
    type: '基础知识'
  },
  {
    id: 494,
    title: '说说 TCP 和 UDP 的区别？',
    answers: [
      '知识点树走起！',
    ],
    tags: ['计算机网络', 'TCP'],
    type: '基础知识'
  },
  {
    id: 495,
    title: '介绍一下 TCP 的挥手',
    answers: [
      '知识点树走起！',
    ],
    tags: ['计算机网络', 'TCP'],
    type: '基础知识'
  },
  {
    id: 496,
    title: '介绍一下 TCP 的 SYN Flood 攻击',
    answers: [
      '知识点树走起！',
    ],
    tags: ['计算机网络', 'TCP'],
    type: '基础知识'
  },
  {
    id: 497,
    title: '说说 CSS 布局',
    answers: [
    ],
    tags: ['CSS'],
    type: '通用领域知识'
  },
  {
    id: 498,
    title: '说说 CSS 选择符',
    answers: [
    ],
    tags: ['CSS'],
    type: '通用领域知识'
  },
  {
    id: 499,
    title: '说说 层叠规则（优先级和权重）',
    answers: [
    ],
    tags: ['CSS'],
    type: '通用领域知识'
  },
  {
    id: 500,
    title: '说说 样式表的来源',
    answers: [
    ],
    tags: ['CSS'],
    type: '通用领域知识'
  },
  {
    id: 501,
    title: '说说 样式的值',
    answers: [
    ],
    tags: ['CSS'],
    type: '通用领域知识'
  },
  {
    id: 502,
    title: '说说 box-sizing',
    answers: [
    ],
    tags: ['CSS'],
    type: '通用领域知识'
  },
  {
    id: 503,
    title: 'visibility, display:none, opacity 区别',
    answers: [
    ],
    tags: ['CSS'],
    type: '通用领域知识'
  },
  {
    id: 504,
    title: '说说前端 安全',
    answers: [
    ],
    tags: ['浏览器'],
    type: '通用领域知识'
  },
  {
    id: 505,
    title: '说说 Web 性能',
    answers: [
    ],
    tags: ['浏览器'],
    type: '通用领域知识'
  },
];

export default data;
